<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style> .box{ width: 200px; height: 200px; border: 2px dashed red; margin: 100px auto; position: relative; transform: rotateX(19deg) rotateY(20deg); transform-style: preserve-3d; border-radius: 50%; animation: boxMove 50s linear; } .box>div{ width: 200px; height: 200px; font-size: 80px; position: absolute; left: 0; top: 0; /* line-height ---调节字体高度 */ text-align: center; line-height: 200px; } .box .front{ background-color: rgba(255,0,0,0.4); transform: translateZ(100px); } .box .back{ background-color: rgba(0,244,0,0.6); transform: translateZ(-100px) } .box .up{ background-color:rgba(0,255,255,0.6); transform-origin: top; transform: translateZ(-100px) rotateX(90deg); } .box .down{ background-color: rgba(255,255,0,0.6); transform-origin: bottom; transform: translateZ(-100px) rotateX(-90deg); } .box .left{ background-color: rgba(0,0,255,0.4); transform-origin: left; transform: translateZ(-100px) rotateY(-90deg); } .box .right{ background-color: rgba(255,0,255,0.4); transform-origin: right; transform:translateZ(-100px) rotateY(90deg); } @keyframes boxMove{ 0%{ } 100%{ transform: rotateX(720deg) rotateY(720deg); } } </style> </head> <body> <div class="box"> <div class="up">上</div> <div class="down">下</div> <div class="left">左</div> <div class="right">右</div> <div class="front">前</div> <div class="back">后</div> </div> </body> </html>