前一段时间没事研究css3的动画效果，写了一个旋转的正方体。
<div class="stage"> <div class="cube"> <div class="cube1">cube1</div> <div class="cube2">cube2</div> <div class="cube3">cube3</div> <div class="cube4">cube4</div> <div class="cube5">cube5</div> <div class="cube6">cube6</div> </div> </div> <style> *{margin: 0;padding:0;} .stage { width: 500px; height: 500px; background: black; position: relative; } .cube { transform-style:preserve-3d; position: absolute; transform:rotateX(-45deg) rotateY(-45deg); animation: rotate linear 20s infinite; left: 30%; top: 40%; } .cube div{ width: 100px; height: 100px; line-height: 100px; color: #fff; text-align: center; /*background: red;*/ /*border-radius: 30%;*/ position: absolute; box-shadow: 0 0 120px red; } .cube1 { transform: translate3d(0,0,50px); } .cube2 { transform: translate3d(0,0,-50px) ; } .cube3 { transform: translate3d(0,50px,0) rotateX(90deg); } .cube4 { transform: translate3d(0,-50px,0) rotateX(90deg); } .cube5 { transform: translate3d(50px,0,0) rotateY(90deg); } .cube6 { transform: translate3d(-50px,0,0) rotateY(90deg); } @keyframes rotate{ 0%{transform: translate3d(0,0,0);} 20%{transform: translate3d(0,-50px,-50px) rotateX(90deg);} 40%{transform: translate3d(0,50px,-50px) rotateX(-90deg);} 60%{transform: translate3d(0,0,-100px) rotateY(0deg);} 80%{transform: translate3d(50px,0,-50px) rotateY(-90deg);} 100%{transform: translate3d(-50px,0,-50px) rotateY(90deg); } </style>
