自学前端第二十三天:CSStransform3D形变

3D变换 transform3D

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

2.3D变形涉及的属性主要是

①transform-origin:调整物体的旋转点,设置在当前子盒子上

②transform:物体的变幻(平移,旋转,缩放,倾斜),设置在子盒子上

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-yxpHXZ5W-1619629397509)(C:\Users\tuyue\AppData\Local\Temp\1613916945536.png)]

③transform-style:开启3d 设置在父级上

④perspective:中心人眼(单纯人眼到屏幕距离而已,具体看perspective那里详解) ,

必须设置在父级上,不设置perspective则看不出translateZ轴移动的近大远小的感觉

⑤perspective-origin: 调整人眼视角,设置在父级上.

(默认50%,50% .第一个值X越大,眼睛越往右挪,第二个值Y越大,眼睛越往下挪,)

一.坐标轴

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

简单记住他们的坐标：

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

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

z 里面是负的， 外面是正的 (负往内推,正往外推)

二.transform-style(开启3D模式)

使被转换的子元素保留其 3D 转换

transform-style: flat|preserve-3d;

值	描述
flat	子元素将不保留其 3D 位置。
preserve-3d	子元素将保留其 3D 位置。

扩展:backface-visibility （了解)

backface-visibility 属性定义当元素3D不面向屏幕时是否可见。

值	描述
visible	背面是可见的。
hidden	背面是不可见的。

三.透视(perspective,即人眼离屏幕的位置)

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

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

• 透视原理： 近大远小 。

  (z轴越大,说明越靠近你perspective设置的值(人眼距离),图片就越大)

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

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

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

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

3.理解perspective透视距离原理

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

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

①translateX(x) 主要目的实现移动效果

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

②translateY(y) 主要目的实现移动效果

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

③translateZ(z) 主要目的实现移动效果

(Z轴的translate的就是内外,即远近移动)

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

④translate3d(x,y,z)

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

⑤perspective

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

perspective: 1000px;
  perspective: 150; (必须写单位ox)
 -webkit-perspectiv