Cubes Experiment

HTML
<div class="wrapper"> <div class="cube"> <div class="front"></div> <div class="back"></div> <div class="top"></div> <div class="bottom"></div> <div class="left"></div> <div class="right"></div> </div> </div> <div class="wrapper two"> <div class="cube small-cube"> <div class="front"></div> <div class="back"></div> <div class="top"></div> <div class="bottom"></div> <div class="left"></div> <div class="right"></div> </div> </div>
CSS
html,body { height: 100%; margin: 0; background: #333; } .wrapper { position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: auto; transform: rotateX(-33deg); transform-style: preserve-3d; z-index: 2; } .cube { transform-style: preserve-3d; backface-visibility: hidden; animation: spin 4s infinite linear; } .cube div { position: absolute; box-sizing: border-box; border: solid 5px #2ecc71; background: transparent; } .small-cube { animation: spin 2s infinite linear; } .wrapper, .cube div { width: 150px; height: 150px; } .two { z-index: 1; } .two .cube { animation-direction: reverse; } .two .cube div { border: solid 5px #2ecc71; top: -100px; } .two,.two div { width: 100px; height: 100px; } .back { transform: translateZ(-75px) rotateY(180deg); } .right { transform: rotateY(-270deg) translateX(75px); transform-origin: top right; } .left { transform: rotateY(270deg) translateX(-75px); transform-origin: center left; } .top { transform: rotateX(-90deg) translateY(-75px); transform-origin: top center; } .bottom { transform: rotateX(90deg) translateY(75px); transform-origin: bottom center; } .front { transform: translateZ(75px); } /* Second Cube */ .two .back { transform: translateZ(-50px) rotateY(180deg); } .two .right { transform: rotateY(-270deg) translateX(50px); transform-origin: top right; } .two .left { transform: rotateY(270deg) translateX(-50px); transform-origin: center left; } .two .top { transform: rotateX(-90deg) translateY(-50px); transform-origin: top center; } .two .bottom { transform: rotateX(90deg) translateY(50px); transform-origin: bottom center; } .two .front { transform: translateZ(50px); } /* Animation */ @keyframes spin { to { transform: rotateY(360deg); } }
JAVASCRIPT
Expand for more options Login