CSS3 3D酷炫立方体变换动画的实现

我爱撸码，撸码使我感到快乐！

大家好，我是Counter，本章微博主要利用了CSS3的一些新特性，

主要用到关键帧来使3D图形运动起来，涉及到了一些抽象的思想，立体的想象。

先给大家看看完成的效果，代码也不是很难，每行代码都给到了详细注释，纯CSS，没有用到JS，CSS3不错。

效果如下:

每一行基本都有注释，就不重复说了，代码如下:

    
    
    
    
    
 
 .wrapper {
     
     perspective: 500px;
     
     margin: 100px auto 0;
     width: 200px;
     height: 200px;
     
 }
 
 .box {
     
     position: relative;
     
     transform-style: preserve-3d;
     width: 200px;
     height: 200px;
     
     animation: move 8s linear infinite;
 }

 
 div[class^="item"] {
     position: absolute;
     top: 0;
     left: 0;
     width: 200px;
     height: 200px;
     
     text-align: center;
     
     line-height: 200px;
 }

 
 
 
 .item1 {  
     
     transform: translateZ(100px);
     
     background-color: rgba(255, 0, 0, 0.6);
 }
 
 .item2 {
     
     transform: translateZ(-100px);
     background-color: rgba(72, 42, 245, 0.6);
 }
 
 .item3 {
     
     transform: rotateX(90deg) translateZ(100px);
     background-color: rgba(217, 230, 36, 0.6);
 }
 
 .item4 {
     
     transform: rotateX(90deg) translateZ(-100px);
     background-color: rgba(58, 7, 51, 0.6);
 }
 
 .item5 {
     
     transform: rotateY(90deg) translateZ(-100px);
     background-color: rgba(241, 142, 75, 0.6);
 }
 
 .item6 {
     
     transform: rotateY(90deg) translateZ(100px);
     background-color: rgba(125, 178, 238, 0.6);
 }

 
 @keyframes move {
     0% {
  transform: rotateX(0) rotateY(0) rotateZ(0);
     }
     100% {
  transform: rotateX(360deg) rotateY(360deg) rotateZ(360deg);
     }
 }
    


    
 
     1
     2
     3
     4
     5
     6
 
    

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持考高分网。