CSS-3D变换中的改变层级的属性

总结

• transform-style 是用于辅助的，最好还是添加一下
• perspective 和 transform:translateZ 为正值时可以使元素的层级提高到最前面

transform-style

属性值

• flat：将设置元素的子元素位于该元素的平面中,默认值
• preserve-3d：将指示元素的子元素应位于 3D 空间中

注意点

• 不能被子元素继承
• 效果作用于子元素,不作用于自身
• 要结合 transform 使用,否则没效果

使用语法

• transform-style:preserve-3d

transform:translateZ()

理解Z轴：

• 在 3D 变化中,元素的 Z 轴是指元素在初始情况下,从元素背面穿过元素指向元素正面的方向,初始状态下元素的 Z 轴值为 0,沿着 Z 轴往下移动,Z 轴值为负值,反之则为正值

注意点：

• 父元素没开启 3D 空间(transform: preserve-3d)的情况下,该属性无效
• 该属性是 3D 变化中控制元素 Z 轴移动的属性
  • 若兄弟元素有设置该属性,Z 轴值小的会处于 Z 轴值大的元素的下方
  • 若兄弟元素都没设置,HTML 结构中,后写的元素在上方

使用语法:

• transform:translateZ(100px)

透视 perspective

原理：近大远小

理解浏览器的坐标系：

• 浏览器平面为 Z=0 的平面，坐标原点默认为图片的中心，可以通过更改透视原点进行更改。

作用

• 该属性指定了观察者与 z=0 平面的距离，使具有三维位置变换的元素产生透视效果。
• perspective：视距，表示视点距离屏幕的长短。视点，用于模拟透视效果时人眼的位置。
• perspectiveOrigin: 个人理解为视点的 xy 坐标，perspective 则是 z 坐标，三者可以再三维中确定视点的唯一位置。

使用语法

.class {
  perspective: 200px;
}
// 单独定义的perspective只在初次渲染时，投影在屏幕上
.class {
  transform: perspective(200px);
}
// 会根据transform动画的变化来进行重新渲染

注意点

• 不能被子元素继承
• 效果作用于子元素,不作用于自身
• 要在其它 3d 变换之前定义，否则无效
• 呈现 3d 效果的父元素要添加 transform-style：preserver-3d 属性
• backface-visibility：用来定义元素不是正面朝向视点时的可视情况