css3实现盒子 3D 旋转效果

效果展示：

相关知识：

子元素按照3维空间摆放：

transform-style: preserve-3d;

定义 3D 元素距视图的距离，以像素计。该属性允许您改变 3D 元素查看 3D 元素的视图

设置元素在X轴变换：

transform: rotateX(90deg)

 

设置元素在Y轴变换：

transform: rotateY(90deg)

设置元素在Z轴变换

transform:translateZ(200px);

当rotateX(90deg)或rotateX(-90deg)时为格子做为顶部和底部俩个方块，translateZ为上下移动。

代码实现：

  
  
  
  
  


  

    

      
1
      
2
      
3
      
4
      
5
      
6
    
  

项目预览地址：

3D盒子

项目地址：

GitHub - txd688/practice: 小项目练习（css3、js、vue、node等）