transform 3D效果

transform:

  rotateX():正值向上翻转

  rotateY():正值向右翻转

  translateZ():正值向前,负值向后

  scaleZ():立体元素的厚度

3D写法:

  scale3d():三个值 X Y Z

  translate3d():三个值 X Y Z

  rotate3d():四个值 0|1(X轴是否添加旋转角度)

            0|1(Y轴是否添加旋转角度)

            0|1(Z轴是否添加旋转角度)

            deg(旋转角度)

3D相关属性:

  perspective:离屏幕多远的距离去观察元素,值越大幅度越小。

  perspective-origin:景深-基点位置,观察元素的角度

  transform-origin:X Y Z(改变立方体基点,Z轴只能写数值不能写单词)

  transform-style:3D空间

          flat(默认值2D)、preserve-3D(3D,产生一个三维空间)

  backface-visibility:背面隐藏

        hidden、visible(默认值)

posted @ 2021-01-08 19:19  小_小白  阅读(179)  评论(0)    收藏  举报