3D转换

3D转换

• 3D移动
  • 方法：translate3d(x, y, z)使元素在这坐标轴上移动，可以分开写，如：translateX()，translateY()，translateZ()
• 3D缩放
  • 方法：scale3d(x, y, z)使元素在三个坐标轴上缩放，可以分开写，如：scaleX(), scaleY(), scaleZ()
• 3D旋转
  • 方法：rotate3d(x, y, z, deg) 是元素旋转，其中xyz是相应坐标轴上的相量值，deg是角度
• 透视/景深效果：左手法则-大拇指指向当前坐标轴的下方向，手指环绕的方向就是正方向
  • perspective(length) 为一个元素设置三维透视的距离。仅作用于元素的后代，而不是元素本身。
  • perspective-origin(x, y) 属性规定了镜头在平面上的位置。默认是放在元素的中心
  • transform-style: preserve-3d
    • 设置在父元素中，使子元素保留3d变换效果