- Set perspective for container
.cubic-container {
...
-webkit-perspective: 2000px;
perspective: 2000px;
}
- Set main element's style with transform-style: preserve-3d
.cube {
...
transform-style: preserve-3d;
}
- Every single cube's transform should rotate first then translate position. If you change the order, you'll get different result.
.cube .right {
transform: rotateY(90deg) translateZ(150px);
}