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