3D

区别 ：

  1. 给父元素： 子元素有共同的视角。
  2. 给子元素，各个子元素有自已的视角。
  • 注意：当给子元素设置transform：translateZ（）的值大于perspective的值时，会脱离视距之外，使元素不可见。

perspective（透视距离）

  • 1、定义3D元素的透视效果 (景深或视角)，（或者可以理解为： 设置从何处查看一个元素）
  • 2、常用语法： perspective : 1000px;
  • 3、 值越小，元素离视图越近，透视效果越明显，值越大，越远离视图，透视效果越不明显。
  • 4、需要3D变换的元素一定要在外面套一个父元素，在父元素上设置perspective属性。
  • 5、也可以给元素本身设置 ： transform: perspective(300px) rotateY(60deg) ;

transform-style（是否为3d模型）

  • （1）指定在父元素3D变换时，子元素如何在3D空间中呈现，
  • （2）可选项：preserve-3D | flat (2d效果，默认)
  • （3）需要设置在3D变换的父元素中，并且高于任何嵌套的变形元素。
  • （4）如果你的父元素设置了transform-style值为preserve-3d，就不能为了防止子元素溢出容器而设置overflow值为hidden;

rotate3d(x,y,z,angle)（角度）

  • rotateX正值表示元素围绕X轴从前往后顺时针旋转
  • rotateX负值值表示元素围绕X轴从后往前逆时针旋转
  • rotateY正值表示元素围绕Y轴从左往右顺时针旋转
  • rotateY负值值表示元素围绕Y轴右后往左逆时针旋转Y
  • rotateZ正值表示元素围绕Z轴从上往下顺时针旋转
  • rotateZ负值值表示元素围绕Z轴从下往上逆时针旋转

perspective-origin()（视角）

（1）语法：perspective-origin : x轴 y轴;
（2）作用：改变视图角度（可理解为视线的方向），影响三维效果呈现。
（3）坐标为当前元素的原点。和perspective结合使用。

transform-origin : x轴 y轴 z轴;
注意：Z轴只能设置为像素值，不能用关键字

backface-visibility

  1. 作用：定义元素在不面对屏幕时是否可见
  2. visible 可见
    hidden 不可见