WordPress Hosting
Free Photos
WordPress Themes

3D Cube Rotation

HTML
<div class="cube-container"> <div class="cube cube-large"> <figure class="front"></figure> <figure class="back"></figure> <figure class="right"></figure> <figure class="left"></figure> <figure class="top"></figure> <figure class="bottom"></figure> </div> <div class="cube cube-small"> <figure class="front"></figure> <figure class="back"></figure> <figure class="right"></figure> <figure class="left"></figure> <figure class="top"></figure> <figure class="bottom"></figure> </div> </div>
SCSS
// ========================================================== // DEMO STYLES : Not Required // ========================================================== $bg: darken(#58ACD0, 30%); html,body{height:100%;}body{display:flex;flex-direction:column;align-items:center;justify-content:center;width:100%;background:$bg;} // ========================================================== // Cube // ========================================================== $cube-size: 200px; .cube-container { height: $cube-size; width: $cube-size; perspective: 1000px; // Adjust to taste if desired to switch // default viewing perspective. // perspective-origin: 100% -100%; position: relative; } .cube { height: 100%; position: absolute; // Preserve 3d effect of child elements // default value is 'flat'. transform-style: preserve-3d; // tells browser not to render the back of the element backface-visibility: visible; width: 100%; figure { height: $cube-size; margin: 0; position: absolute; width: $cube-size; background: rgba(#66AFCA, 0.3); } } .cube-large { figure { outline: 1px solid #66AFCA; } } .cube-small { z-index: -1; figure { outline: 2px solid white; background: rgba(#42A6DD, 1); } } // ========================================================== // Sides // ========================================================== .front { transform: translateZ($cube-size/2); } .back { transform: rotateY(180deg) rotateX(0deg) translateZ($cube-size/2); } .left { transform: rotateY(-90deg) translateZ($cube-size/2); } .right { transform: rotateY(90deg) translateZ($cube-size/2); } .top { transform: rotateY(90deg) translateZ($cube-size/2); } .bottom { transform: rotateX(-90deg) rotateZ(-180deg) translateZ($cube-size/2); } // ========================================================== // Animation // ========================================================== .cube-large { animation: large-cube-spin 5000ms infinite linear; } .cube-small { animation: small-cube-spin 5000ms infinite reverse linear; } @keyframes large-cube-spin { from { transform: rotateY(0); } to { transform: rotateY(-360deg); } } @keyframes small-cube-spin { from { transform: scale(.5) rotateY(0); } to { transform: scale(.5) rotateY(-360deg); } }
JAVASCRIPT
Expand for more options Login