.box { width:250px; height:250px; border:1px dashed red; margin:100px auto; position:relative; border-radius:50%; /* 让子盒子保持3d效果*/ transform-style:preserve-3d; transform:rotateX(30deg) rotateY(-30deg); animation:gun 8s linear infinite; } .box>div { width:100%; height:100%; position:absolute; text-align:center; line-height:250px; font-size:60px; color:#daa520; } .left { background-color:rgba(255,0,0,0.3); /* 变换中心*/ transform-origin:left; /* 变换*/ transform:rotateY(90deg) translateX(-125px); } .right { background:rgba(0,0,255,0.3); transform-origin:right; /* 变换*/ transform:rotateY(90deg) translateX(125px); } .forward { background:rgba(255,255,0,0.3); transform:translateZ(125px); } .back { background:rgba(0,255,255,0.3); transform:translateZ(-125px); } .up { background:rgba(255,0,255,0.3); transform:rotateX(90deg) translateZ(125px); } .down { background:rgba(99,66,33,0.3); transform:rotateX(-90deg) translateZ(125px); } @keyframes gun { 0% { transform:rotateX(0deg) rotateY(0deg); } 100% { transform:rotateX(360deg) rotateY(360deg); } }