Estructura HTML de la animación del cubo CSS

425 ByBy.inc

Abrir en el editor Publica tu código

Estructura HTML de la animación del cubo CSS

Recomendado

18 October 2025

Plantilla HTML básica con botón (español)

13 June 2024

DICCIONARIO DE PALABRAS Y PRONUNCIACIÓN

16 February 2025

Un código de NotYoEA

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

Recomendado

Plantilla HTML básica con botón (español)

DICCIONARIO DE PALABRAS Y PRONUNCIACIÓN

Un código de NotYoEA

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS