3D变换(二十二）

3D变换(transform3D)

##坐标轴

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-EJpnbFui-1625458830250)(D:/JAVA/WEB%E5%89%8D%E7%AB%AF%E5%AD%A6%E4%B9%A0%E8%B5%84%E6%96%99%EF%BC%88%E5%85%A8%E5%A5%97%EF%BC%89/%E4%BA%8C%E5%8D%81%E4%B8%83/%E8%AF%BE%E4%BB%B6%E7%AC%94%E8%AE%B0/assets/740839-20160404190248937-1489051755.png)]

简单记住他们的坐标:

X左边是负值,右边是正值.

Y上面是负值,下面是正直.

Z上面是负值,外面是正值.

透视(perspective)

• 透视原理: 近大远小;
• 浏览器透视: 把近大远小的所有图片,透视在屏幕上.
• perspective: 视距, 表示视点距离屏幕的长短.视点,用于模拟透视效果时人眼的距离.
• 注: 并非任何情况下需要设置透视效果,根据开发需要进行设置.

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

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

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

• translateX 水平方向上移动
• translateY垂直方向上移动
• transformZ最直观的表现就是大小的变化,实质上是XY平面相对于视点的远近变化. 比如说,设置了perspective为200px,那么transformZ的值越接近200,就离得越近,看上去越大,超过200就看不到.

translate3D (x,y,z)

x和y可以是长度,也可以是百分比,百分比是相对于本身元素水平方向上宽度和垂直 方向上高度和,Z只能设置长度.

perspective

设置3D空间的景深,即Z轴的深度,perspective属性只影响3D转换元素.

perspective: 100px;

perspective-origin

​ 默认情况下,坐标z位于父元素的水平中线与垂直中线的交界处,可以通过perspective-origin来调整位置.

设置绝对定位样式来移动元素时,此时坐标系的x轴和y轴以设置了相对定位的祖先元素中的为原点.

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

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

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

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

在调整z轴的位置的时候,用户的视角也会跟着变化.

transform-style

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

transform-style: flat|preserve-3d;

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

backface-visibility （了解)

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

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

visibility

控制一个元素是否可见.

visibility: visible(默认)/ hidden

设置为hidden时,视觉上不可见,但保留了渲染位置;

display: none 与 visibility: hidden 的区别

1.display: none; 实现的效果是 元素不进行渲染,在页面上不存在.

2.visibility具有继承性,子元素会继承父元素的 visibility: hidden; 如果重新给子元素设置 visibility: visible, 则子元素又会显示出来;

3.visibility: hidden 不会影响计数器的计数, visibility: hidden虽然让元素不见了,但是其计数器仍在运行.

4.visibility: hidden 会被子元素继承,可以通过设置子元素visibility: visible 使子元素显示出来.

5.opacity: 0; 也会被子元素继承,但是不能通过设置子元素opacity: 0使其重新显示.

6.CSS3的transition 支持visibility属性,但不支持display,可以配合visibility使用纯css实现hover延时显示效果.

不能通过设置子元素opacity: 0使其重新显示.

6.CSS3的transition 支持visibility属性,但不支持display,可以配合visibility使用纯css实现hover延时显示效果.