Webleb - Code-Snippets - CSS-Cube-Animation HTML-Struktur

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

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS