body{ background: #ddd; } .wrapper{ position: absolute; top: 50%; left: 50%; perspective: 1500px; } .box area{ postion: relative; transform-style: preserve 3d; animation-name: rotate; animation-duration: 30s; animation-timing-function: linear; animation-iteration-count: infinite; } @keyframes rotate{ 0%{ transform: rotate3d(0,0,0,0); } 100%{ transform: rotate3d(0,1,0,360deg); } } .box{ position: absolute; width: 400px; height: 400px; boder: 2px solid #262626; } .box-front{ transform: translateX(-200px) translateY(-200px) translateZ(-200px); background: rgba(253,16,107,0,5); } .box-back{ transform: translateX(-200px) translateY(-200px) translateZ(-200px); background: rgba(1,251,236,0.5); } .box-right{ transform: translateY(-200px) rotateY(90deg); background: rgba(1,255,110,0.5); } } }