.main{ width : 200px; height : 200px; margin : 100px auto;}

.cube{ perspective : 10000px; width : 100%; height : 100%; perspective-origin : 150% 150%; transform-style : preserve-3d; animation : ani 7s infinite;}.layer{ position : absolute; line-height : 200px; width : 200px; height : 200px; font-size : 50px; color : #000; text-align : center;}.right{ background-color : red; transform : rotateY(90deg) translateZ(100px);}.left{ background-color : green; transform : rotateY(-90deg) translateZ(100px);}.front{ background-color : yellow; transform : translateZ(100px);}.back{ background-color : cyan; transform : rotateY(180deg) translateZ(100px);}.top{ background-color : purple; transform : rotateX(90deg) translateZ(100px);}.bottom{ background-color : blue; transform : rotateX(-90deg) translateZ(100px);}@keyframes ani{ 25%{transform:rotateX(360deg);} 50%{transform:rotateY(180deg) translateZ(100px);} 75%{transform:rotateY(35deg) rotateX(45deg);} 100%{transform:rotateY(270deg) rotateX(360deg);} }