Floating Cube
Home
Snippets
Floating Cube
HTML
CSS
JS
<div class="scene"> <div class="cube"> <div class="front"></div> <div class="back"></div> <div class="left"></div> <div class="right"></div> <div class="top"></div> <div class="bottom"></div> </div> </div>
body { display: flex; justify-content: center; align-items: center; height: 100vh; background-color: #0a0a0a; margin: 0; overflow: hidden; } .scene { perspective: 800px; } .cube { position: relative; width: 100px; transform-style: preserve-3d; animation: rotate 5s infinite linear; } .cube div { position: absolute; width: 100px; height: 100px; background: rgba(0, 255, 255, 0.3); border: 2px solid cyan; box-shadow: 0 0 20px cyan; transition: 0.3s; } .cube:hover div { box-shadow: 0 0 40px cyan; } .front { transform: translateZ(50px); } .back { transform: rotateY(180deg) translateZ(50px); } .left { transform: rotateY(-90deg) translateZ(50px); } .right { transform: rotateY(90deg) translateZ(50px); } .top { transform: rotateX(90deg) translateZ(50px); } .bottom { transform: rotateX(-90deg) translateZ(50px); } @keyframes rotate { 0% { transform: rotateX(0) rotateY(0); } 100% { transform: rotateX(360deg) rotateY(360deg); } }
//javascript
Ad #1
Ad #2
Scroll to Top