CSS 3D变换 transform3D

3D变换 transform3D

浏览器中我们除了可以实现 x y两轴的2D变换 也可以开启3D效果 3D效果经常用于一些复杂的绚丽效果展示 可以用来构建基础的3D模型空间

3D变形涉及的属性主要是transform-origin、transform、transform-style、perspective、

perspective-origin、backface-visibility

坐标轴

在了解透视之前，首先要先了解坐标轴。3D变形与2D变形最大的不同就在于其参考的坐标轴不同。2D变形的坐标轴是平面的，只存在x轴和y轴，而3D变形的坐标轴则是x、y、z三条轴组成的立体空间，x轴正向、y轴正向、z轴正向分别朝向右、下和屏幕外

 

简单记住他们的坐标：

x左边是负的，右边是正的

y 上面是负的， 下面是正的

z 里面是负的， 外面是正的

透视(perspective)

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

透视可以将一个2D平面，在转换的过程当中，呈现3D效果。

• 透视原理： 近大远小 。

• 浏览器透视：把近大远小的所有图像，透视在屏幕上。

• perspective：视距，表示视点距离屏幕的长短。视点，用于模拟透视效果时人眼的位置

注：并非任何情况下需要透视效果，根据开发需要进行设置。

perspective 一般作为一个属性，设置给父元素，作用于所有3D转换的子元素

理解透视距离原理：

d: 3D坐标系 z轴的长度

z: 元素沿着Z轴移动的距离

 

 

 

translateX(x)

仅水平方向移动**（X轴移动）

主要目的实现移动效果

translateY(y)

仅垂直方向移动（Y轴移动）

 

translateZ(z)

transformZ的直观表现形式就是大小变化，实质是XY平面相对于视点的远近变化（说远近就一定会说到离什么参照物远或近，在这里参照物就是perspective属性）。比如设置了perspective为200px;那么transformZ的值越接近200，就是离的越近，看上去也就越大，超过200就看不到了，因为相当于跑到后脑勺去了，我相信你正常情况下，是看不到自己的后脑勺的。

translate3d(x,y,z)

[注意]其中，x和y可以是长度值，也可以是百分比，百分比是相对于其本身元素水平方向的宽度和垂直方向的高度和；z只能设置长度值

perspective

设置3D空间的景深 也就是z轴的深度, perspective 属性只影响 3D 转换元素。

perspective: 1000px;

perspective-origin

默认情况下， 坐标系的Z轴位于父元素的水平中线与垂直中线的交界处, 我们也可以通过设置perspective-origin来调整位置

使用绝对定位样式移动元素时, 此时坐标系的X轴和Y轴以设置了相对定位的祖先元素的中点为原点

 使用transform的位移样式或是相对定位样式移动元素时, 此时坐标系的X轴和Y轴以元素的中点为原点