css3之转换

时间:2022-06-11 03:14:07

1、2D转换

2、3D转换

transform-style属性(设置三维/二维效果)
  值:
    flat表示子元素不保留3D设置(默认)
    preserve-3d表示子元素保留3D设置

transform属性  

  值:

    X轴向右为正,Y轴向下为正,Z轴向外为正
    translateX(length)、translateY(length)、translateZ(length)对元素进行3D位移,合并为translate3d(x,y,z,deg)(并不好用,必须同等旋转)

      旋转逆时针为负、顺时针为正,旋转中心设置 

    scaleX(number)、scaleY(number)、scaleZ(number)对元素进行3D缩放,合并为scale3d(number,number,number)

    rotateX(angle)、rotateY(angle)、rotateZ(angle)对元素进行3D旋转操作,合并为rotate3d(angle,angle,angle)