css
.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); } } html <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> </style> </head> <body> <div class="box"> <div class="up">上</div> <div class="down">下</div> <div class="left">左</div> <div class="right">右</div> <div class="forward">前</div> <div class="back">后</div> </div> </body> </html>