<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> @keyframes zhuan { 0% { transform: rotateY(0) rotateX(0) rotateZ(0); } 50% { transform: rotateY(1800000deg) rotateX(1800000deg) rotateZ(1800000deg); } 100% { transform: rotateY(3600000deg) rotateX(3600000deg) rotateZ(3600000deg); } } #box { width: 300px; height: 300px; margin: 100px auto 0; border: 1px solid red; position: relative; transform-style: preserve-3d; animation: zhuan 1s linear infinite; } #box > div { width: 100%; height: 100%; position: absolute; left: 0; top: 0; } #box > div:nth-child(1) { background: lightgreen; transform: translateZ(150px); } #box > div:nth-child(2) { background: purple; transform: translateZ(-150px); } #box > div:nth-child(3) { background: orange; transform: translateX(150px) rotateY(90deg); } #box > div:nth-child(4) { background: lightblue; transform: translateX(-150px) rotateY(90deg); } #box > div:nth-child(5) { background: lightseagreen; transform: translateY(150px) rotateX(90deg); } #box > div:nth-child(6) { background: lightcoral; transform: translateY(-150px) rotateX(90deg); } </style> </head> <body> <div id="box"> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> </div> </body> </html>