CSS变形(transform)

transform

• transform-style 定义元素定位在三维空间内还是平面内，取值：

  • flat 默认，表示元素在平面内
  • preserve-3d 位于 3D 空间中
  • 该属性子元素不能继承

• transform-origin 设置该元素变形原点，默认center(中心点)，取值：

  • 默认值为50% 50% 0，如果某个方向上的值未指定，则为默认值
  • 取1个值，如果是<length>或<percentage>值，则表示水平平移
    • <length> 长度值，一般用 px
    • <percentage> %
    • center,left,right,top,bottom 关键字之一
  • 取2个值，表示水平偏移和垂直偏移
    • 第一个值：<length>、<percentage>或关键字之一left,center,right
    • 第二个值：<length>、<percentage>或关键字之一top,center,bottom
  • 取3个值
    • 前两个值与取两个值相同
    • 第三个值必须是<length>，它始终表示 Z轴 偏移

• transform-box 定义参考系框的范围

  • content-box 内容框用作参考框
  • border-box 边框用作参考框
  • fill-box 对象边界用作参考框，svg中使用
  • stroke-box 笔触边界用作参考框，svg中使用
  • view-box 以viewBox用作参考框，svg中使用

• transform 该属性可以将元素旋转、缩放、移动和倾斜等，取值：

  • none 不进行转换

• 2D转换

  • matrix(a,b,c,d,e,f) 矩阵转换

    • 计算规则：假设元素里的一个点原来的坐标为(x,y)，根据以下矩阵运算得到转换后的坐标

      参数	乘	原来的坐标	等于	转换后的坐标
      [a c e]		[x]		[ax + cy + e]
      [b d f]	*	[y]	=	[bx + dy + f]
      [0 0 1]		[1]		[0 + 0 + 1]

    • 最后一行是为了方便矩阵运算，固定为[0 0 1]

    • 默认值：

      • [1 0 0]
      • [0 1 0]
      • [0 0 1]
  • translate(x,y) 平移
    • 参数的类型为 <length> 或 <percentage>
    • 传1个参数：表示x轴平移的量，y轴默认为0
    • 传2个参数：
      • x 表示x轴平移的量
      • y 表示y轴平移的量
    • 用矩阵转换表示：
      [1 0 x]
      [0 1 y]
      [0 0 1]
  • translateX(x) x轴平移
    • 只接收一个参数，表示x轴平移的量
  • translateY(y) y轴平移
    • 只接收一个参数，表示y轴平移的量
  • rotate(a) 旋转
    • 参数取值类型为 <angle> 角度，单位一般用 deg，顺时针旋转为正，逆时针为负
    • 用矩阵转换表示：
      [cosa -sina 0]
      [sina cosa 0]
      [0 0 1]
  • scale(x,y) 缩放
    • 参数的类型为 <number> 数字，表示放大或缩小的倍数，设为负值可以获得镜像
    • 传1个参数：表示x轴和y轴同时放大和缩小的倍数
    • 传2个参数：
      • x 表示x轴缩放的倍数
      • y 表示y轴缩放的倍数
    • 用矩阵转换表示：
      [x 0 0]
      [0 y 0]
      [0 0 1]
  • scaleX(x) x轴缩放
    • 只接收一个参数，表示x轴缩放的倍数
  • scaleY(y) y轴缩放
    • 只接收一个参数，表示y轴缩放的倍数
  • skew(x,y) 倾斜
    • 参数的取值类型为 <angle> deg
    • 传1个参数：表示在x轴方向上倾斜的度数，y轴方向不变
    • 传2个参数：
      • x 在x轴方向上倾斜的度数
      • y 在y轴方向上倾斜的度数
    • 用矩阵转换表示：
      [1 tanx 0]
      [tany 1 0]
      [0 0 1]
  • skewX(x) x轴倾斜
    • 只接收一个参数，表示x轴方向倾斜的角度
  • skewY(y) y轴倾斜
    • 只接收一个参数，表示y轴方向倾斜的角度

• 3D转换

  • matrix3d(a1,b1,c1,d1,a2,b2,c2,d2,a3,b3,c3,d3,a4,b4,c4,d4) 矩阵转换

    参数	乘	原来的坐标	等于	转换后的坐标
    [a1 a2 a3 a4]		[x]		[a1x + a2y + a3z + a4]
    [b1 b2 b3 b4]	*	[y]	=	[b1x + b2y + b3z + b4]
    [c1 c2 c3 c4]		[z]		[c1x + c2y + c3z + c4]
    [d1 d2 d3 d4]		[1]		[d1x + d2y + d3z + d4]

    • 其中 d行 的数据表示一个点的深度，d4的值控制着元素总体的放大和缩小（效果类似scale3d()）
    • 默认值：
      • [1 0 0 0]
      • [0 1 0 0]
      • [0 0 1 0]
      • [0 0 0 1]

  • translate3d(x,y,z) 三维空间的平移

    • x和y的取值同translate()，分别表示x轴和y轴的平移量
    • z表示z轴的平移量，该参数只能是 <length> 值

  • translateZ(z) z轴平移

    • 只接收一个参数，表示z轴平移的量，该参数只能是 <length> 值

  • rotate3d(x,y,z,a) 三维空间的旋转

    • x 取值类型为 <number> ，表示x轴方向的向量，取值一般在0~1之间
    • y 取值类型为 <number> ，表示y轴方向的向量，取值一般在0~1之间
    • z 取值类型为 <number> ，表示z轴方向的向量，取值一般在0~1之间
    • a 取值类型为 <angle> ，表示旋转的角度
      • 旋转轴为x,y,z三个向量的和，旋转方向遵循左手螺旋定则
        • 大拇指的方向为旋转轴向量的方向，四指的指向为正方向

  • rotateX(a) 围绕x轴旋转的度数

    • x轴的正方向为旋转轴向量的方向，相当于 rotate3d(1,0,0,a)，遵循左手螺旋定则

  • rotateY(a) 围绕y轴旋转的度数

    • 相当于 rotate3d(0,1,0,a)

  • rotateZ(a) 围绕z轴旋转的度数

    • 相当于 rotate3d(0,0,1,a)

  • scale3d(x,y,z) 三维空间的缩放

    • 必须传3个参数，参数类型为 <number>
    • x 表示x轴缩放的倍数
    • y 表示y轴缩放的倍数
    • z 表示z轴缩放的倍数

  • scaleZ(z) z轴缩放

    • 只接收一个参数，表示z轴缩放的倍数

  • perspective(d) 设置用户与 z=0 平面的距离

    • 参数取值类型为 <length> 。值越大越接近，视角越远，图像越接近原始图像

• perspective-origin 设置用户视角的位置，3D转换中使用

  • 取值同 transform-origin 属性

• 喜欢的话就点赞关注吧