Structure HTML de l'animation CSS Cube

Ouvrir dans l'éditeur Publiez votre code

Recommandé

2 October 2025

Extrait d'animation de chargement CSS

25 November 2025

* {
 margin: 0;
 padding: 0;
 box-sizing: border-box;
}
body {
 background-color: #000;
 display: flex;
 align-items: center;
 justify-content: center;
 height: 100vh;
 overflow: hidden;
}
.codigo {
 position: absolute;
 top: 0;
 left: 50%;
 transform: translateX(-50%);
 background: #272822;
 color: #F8F8F2;
 font-family: 'Consolas', 'Monaco', monospace;
 font-size: 20px;
 padding: 20px;
 border-radius: 8px;
 white-space: pre-line;
 text-align: left;
 line-height: 1.6;
 max-height: 50%;
 width: 100%;
 box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}
.selector       { color: #F92672; } 
.property       { color: #66D9EF; } 
.value-number   { color: #AE81FF; } 
.value-string   { color: #E6DB74; } 
.value-color    { color: #A6E22E; } 
.brace          { color: #F8F8F2; } 
.comment        { color: #75715E; } 
.function       { color: #A6E22E; } 
.animation-container {
 position: absolute;
 top: 50%;
 left: 50%;
 transform: translate(-50%, -50%);
 display: flex;
 align-items: center;
 justify-content: center;
 width: 100%;
 height: 50%;
 overflow: hidden;
 background-color: #000;
}

/* Estilos para a Animação-Cube */
.cube {
 position: relative;
 width: 100px;
 height: 100px;
 background-color: #ff0000;
 transform-style: preserve-3d;
 perspective: 500px;
 animation: glitch 2s infinite linear;
}
.face {
 position: absolute;
 width: 100%;
 height: 100%;
 background-color: #ffffff;
 display: flex;
 align-items: center;
 justify-content: center;
 opacity: 0.8;
 transition: background-color 0.2s ease-in-out;
}
.face:nth-child(1) {
 background-color: transparent;
 transform: translateZ(50px);
}
.face:nth-child(2) {
 background-color: #00ff00;
 transform: rotateY(180deg) translateZ(50px);
}
.face:nth-child(3) {
 background-color: #0000ff;
 transform: rotateY(90deg) translateZ(50px);
}
.face:nth-child(4) {
 transform: rotateY(-90deg) translateZ(50px);
}
.face:nth-child(5) {
 transform: rotateY(180deg) translateZ(50px);
}
.face:nth-child(6) {
 transform: rotateY(270deg) translateZ(50px);
}

@keyframes glitch {
 0% {
  transform: translateZ(0);
 }
 25% {
  transform: translateZ(5px) rotateX(5deg) rotateY(5deg);
 }
 50% {
  transform: translateZ(0);
 }
 75% {
  transform: translateZ(-5px) rotateX(-5deg) rotateY(-5deg);
 }
 100% {
  transform: translateZ(0);
 }
}

Structure HTML de l'animation CSS Cube

Recommandé

Extrait d'animation de chargement CSS

La légende de Zelda

Un code par constantcc607

HTML

CSS

JS

Recommandé

Extrait d'animation de chargement CSS

La légende de Zelda

Un code par constantcc607

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS