WEBLEB
Home
Editor
Login
Pro
English
English
Français
Español
Português
Deutsch
Italiano
हिंदी
Glitch Cube
729
byby.createsite
Open In Editor
Publish Your Code
29 July 2025
Glitch Garden
28 February 2023
Glitch Text Animation
HTML
Copy
CSS
Copy
* { 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); } }
JS
Copy
/* Replace with your JS Code (Leave empty if not needed) */