CSS3 三维变形实现立体方块特效源码

前言

三维变换使用基于二维变换的相同属性，如果您熟悉二维变换，你们发现3D变形的功能和2D变换的功能类似。3D变形与2D变形的最大不同就在于其参考的坐标轴不同，2D变形的坐标轴是平面的，只存在X轴和Y轴，而3D变形的坐标轴则是X、Y、Z三条轴组成的立体空间，X轴正向是朝右，Y周正向是朝下，Z轴正向是朝屏幕外。

静态效果图如下：

实例代码

    
 
 
 
 
 
 
  * {
   margin: 0;
   padding: 0;
  }
  
  .box {
   position:relative;
   top: 100px;
   width:300px;
   height: 300px;
   margin: 0 auto;
   background-color: #ccc;
   
   perspective:800px;
  }
  .content {
   
   transform-style: preserve-3d;
   
   transition: all 3s linear;
   width:200px;
   height: 200px;
   position: absolute;
   top: 50px;
left: 50px;
  }
  
  .content:hover {
   transform: rotateX(180deg) rotateY(180deg);
  }
  
  .side {
   position: absolute;
height: 200px;
width: 200px;
border: 2px solid #000;
background: rgba(0,0,0,0.3);
color: #fff;
line-height: 200px;
font-size: 30px;
font-weight: bold;
text-align: center;
text-shadow: 0 -1px 0 rgba(0,0,0,0.2);
  }
  
  .side1 {
    transform: translateZ(100px);
  }
  
  .side2 {
   transform: rotateX(180deg) translateZ(100px);
  } 
  
  .side3 {
   transform: rotateY(-90deg) translateZ(100px);
  }
  
  .side4 {
   transform: rotateY(90deg) translateZ(100px);
  }
  
  .side5 {
   transform: rotateX(90deg) translateZ(100px);
  }
  
  .side6 {
   transform: rotateX(-90deg) translateZ(100px);
  }
 
    
    
     
     
      
1
      2
      3
      4
      5
      6
      
     
     
    

总结

以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作能带来一定的帮助，如果有疑问大家可以留言交流。