1-2-12【CSS3】CSS的3D转换

题外话：懒了好几天了，今天接着肝

---

文章内容输出来源：拉勾教育大前端就业集训营

1.概述

• 概述：上一篇文章中，介绍了HTML元素的2D转换：平移、旋转、倾斜等；本章则开始介绍，HTML元素的3D转换。
• 3D转换：transform属性不止能实现2D转换，也可以制作3D立体转换效果，比普通的x、y轴组成的平面效果多了一条z轴，如下图:

• 透视：电脑显示屏是一个2D平面，图像之所以具有立体感(3D效果)，其实只是一种视觉呈现，通过透视可以实现此目的。

说明：“近大远小”是透视的精髓，也是在2D屏幕上展示3D效果的必要条件。

2.透视属性perspective

• 概述：设置在z轴的视线焦点的观察位置，从而实现3D查看效果。
• 属性值：像素值，数值越大，观察点距离原点越远，图形效果越完整且接近原始的尺寸。
• 注意：透视属性需要设置给3D变化元素的父级。
• 书写方式：perspective: 1000px;

说明：你会发现透视和没有透视好像没有区别？因为图像的z轴方向没有发生任何变化，所以和2D图像看起来一样。

3.3D旋转

• 概述：3D旋转比2D旋转更加复杂，需要分别对3个方向的旋转角度进行设定。当然，如果只有一个方向有旋转角度，则只需要写那个方向即可。
• 属性：transform
• 属性值：

属性值	说明
rotateX(angle)	定义沿着X轴的3D旋转
rotateY(angle)	定义沿着Y轴的3D旋转
rotateZ(angle)	定义沿着Z轴的3D旋转

• 注意事项：属性值的角度区分正负，以deg为单位（此处和2D一样），正值为顺时针方向，负值逆时针方向。

说明：在做3D转换的时候，脑子里一定要有这个坐标系，其实很简单，记住坐标轴正负和方向就好。

一个简单的案例

说明：因为只对X轴进行了旋转，且X轴的“旋转正方向”为垂直图片向里，所以我们感觉图片上半部分离我们更远了。

透视距离设置过小的结果

说明：上面讲perspective属性时提到，该属性的属性值相当于我们的观察位置，所以距离过小会出现如图所示的情况。
一般来说，我们设定1000px就可以了。

4.3D位移

• 概述：位移因为是3D了，所以也要分为3个方向进行移动。
• 属性：transform
• 属性值：

属性值	说明
translateX(x)	定义沿着X轴的位移
translateY(y)	定义沿着Y轴的位移
translateZ(z)	定义沿着Z轴的位移

• 注意事项：属性值的角度区分正负，以px或%为单位（此处和2D一样），正值为坐标轴正方向，负值负方向。

一个简单的案例

说明：该案例对图片在Z轴进行了100px的位移，因为Z轴的正方向为垂直于图片向外，所以看起来图片变大了。

一个炫酷的案例

    
    
    
    


    

        
1
        
2
        
3
        
4
        
5
        
6
    

说明：先用定位将6个面放到一起；然后用3D转换，将6个面各自摆放在正确的位置上；最后将父元素进行3D旋转，实现酷炫的3D效果。

transform-style属性

• 概述：用于设置被嵌套的子元素在父元素的3D空间中显示，子元素会保留自己的3D转换坐标轴。
  白话：说白了就是让子元素的3D效果，在父元素中也生效

• 属性值：

  • flat：所有的子元素在2D平面呈现；
  • preserve-3d：保留3D控件。

• 用法：3D元素构建是指某个图形是由多个元素构成的，可以给这些元素的父元素设置transform-style:preserve-3d，来使其变成一个真正的3D图形。

说明：父元素没有设置该属性，则子元素都会像纸片一样。

兼容性

• Internet Explorer10、Firefox以及Opera支持transform属性。
• Chrome 和 Safari 需要前缀 -webkit-。
• Internet Explorer 9 需要前缀 -ms-。

前端文章汇总目录

https://www.jianshu.com/p/6d80dd616ff4

---

结束语：一花一世界，一木一浮生，愿与诸君共勉