Estructura HTML de la animación del cubo CSS

1,423 byby.createsite

Remix Abrir en el editor Pantalla completa Comentar Publica tu código

Estructura HTML de la animación del cubo CSS

Recomendado

12 July 2025

Encabezado fijo controlado por desplazamiento

4 February 2026

Cinco noches en Candy's 1 juego HTML5

2 March 2025

Un código de Komplex

HTML

CSS

* {
 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);
 }
}