h1{text-align:center}.container{perspective:1000px;transform:translateZ(-100px);position:relative}.cube{width:100%;height:100%;position:absolute;transform-style:preserve-3d;animation:rotate 10s linear infinite}.cube div{width:200px;height:200px;opacity:.7;position:absolute;font-size:300%;transform-style:preserve-3d;text-align:center;color:#fff}#front{transform:rotateX(0deg) translateZ(100px);background:red}#back{transform:rotateY(180deg) translateZ(100px);background:blue}#top{transform:rotateX(90deg) translateZ(100px);background:green}#bottom{transform:rotateX(-90deg) translateZ(100px);background:#ff4500}#right{transform:rotateY(90deg) translateZ(100px);background:#ff1493}#left{transform:rotateY(-90deg) translateZ(100px);background:#ff0}@keyframes rotate{0%{transform:rotateX(0deg) rotateY(0deg) rotateZ(0deg)}33%{transform:rotateX(720deg) rotateY(0deg) rotateZ(0deg)}67%{transform:rotateX(720deg) rotateY(720deg) rotateZ(0deg)}100%{transform:rotateX(720deg) rotateY(720deg) rotateZ(720deg)}}p{color:#fff}