Estructura HTML de la animación del cubo CSS

864 byby.createsite

Abrir en el editor Video Publica tu código

Estructura HTML de la animación del cubo CSS

Recomendado

18 June 2023

Formulario de inicio de sesión simple

26 March 2025

Formulario de varios pasos con barra de progreso usando jQuery y CSS3

2 January 2025

Un código de cloudcodes

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

Formulario de inicio de sesión simple

Formulario de varios pasos con barra de progreso usando jQuery y CSS3

Un código de cloudcodes

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS