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