3D旋转立方体qq36521848的博客-

效果图;

上代码：

 <style> .wrap {     width: 120px;     height: 200px;     margin: 20px;     position: fixed;     top: 150px;     right: 715px;     display: table-cell;     vertical-align: middle;     text-align: center;     z-index: 22; }  .cube {     width: 120px;     height: 120px;     margin: 0 auto;     transform-style: preserve-3d;     transform: rotateX(-30deg) rotateY(-80deg);     animation: rotate linear 20s infinite; }  @-webkit-keyframes rotate {     from {         transform: rotateX(0deg) rotateY(0deg);     }     to {         transform: rotateX(360deg) rotateY(360deg);     } }  .cube div {     position: absolute;     width: 120px;     height: 120px;     opacity: 0.8;     transition: all .4s; }  .cube .out_front {     transform: rotateY(0deg) translateZ(60px); }  .cube .out_back {     transform: translateZ(-60px) rotateY(180deg); }  .cube .out_left {     transform: rotateY(-90deg) translateZ(60px); }  .cube .out_right {     transform: rotateY(90deg) translateZ(60px); }  .cube .out_top {     transform: rotateX(90deg) translateZ(60px); }  .cube .out_bottom {     transform: rotateX(-90deg) translateZ(60px); } </style> <div class="wrap">     <div class="cube">         <div class="out_front"><img src="https://files-cdn.cnblogs.com/files/cjsblog/cube01.bmp" class="pic"></div>         <div class="out_back"><img src="https://files-cdn.cnblogs.com/files/cjsblog/cube02.bmp" class="pic"></div>         <div class="out_left"><img src="https://files-cdn.cnblogs.com/files/cjsblog/cube03.bmp" class="pic"></div>         <div class="out_right"><img src="https://files-cdn.cnblogs.com/files/cjsblog/cube04.bmp" class="pic"></div>         <div class="out_top"><img src="https://files-cdn.cnblogs.com/files/cjsblog/cube05.bmp" class="pic"></div>         <div class="out_bottom"><img src="https://files-cdn.cnblogs.com/files/cjsblog/cube06.bmp" class="pic">         </div>     </div> </div>