转换 ​

语法格式 ​

.xx {
  transform: <transform-function-1>... <transform-function-n>;
}

说明

• transform-function 为转换函数
• transform-function 可以指定多个
• transform-function 的执行顺序为从右向左

转换原点 ​

transform-origin: 默认 center，取值可以为一个、两个、三个

• 一个值: center、left、right、top、bottom 或 <length>、<percent>
• 两个值: 取值为 <length>、<percent>，若为关键字，则一个取垂直方向，一个取水平方向
• 三个值: 千两个值与 '两个值' 用法相同，第三个值为 <length> 表示 z 轴偏移量

转换函数 ​

位移 ​

• translateX(x)
  • 说明：指定元素相对当前位置的 X 轴距离
  • 取值：<Xlength> 一个合法的长度，可正可负
• translateY(y)
  • 说明：指定元素相对当前位置的 Y 轴距离
  • 取值：<Ylength> 一个合法的长度，可正可负
• translateZ(z)
  • 说明：指定元素相对当前位置的 Z 轴距离
  • 取值：<Zlength> 一个合法的长度，可正可负
• translate(x, y)
  • 说明：指定元素相对当前位置的平面位移，为 translateX(x) 和 translate(Y) 的复合函数
  • 取值：<Xlength>, <Ylength>
• translate3d(x, y, z)
  • 说明：指定元素相对当前位置的3D位移，为 translateX(x) 、 translate(y) 和 translateZ(z) 的复合函数
  • 取值：<Xlength>, <Ylength>, <Zlength>

缩放 ​

• scaleX(x)
  • 说明：指定元素相对当前宽度的缩放比例
  • 取值：<Xrate> 一个合法的数字，负数会取绝对值
• scaleY(y)
  • 说明：指定元素相对当前高度的缩放比例
  • 取值：<Yrate> 一个合法的数字，负数会取绝对值
• scaleZ(z)
  • 说明：指定元素相对当前 Z 轴的缩放比例
  • 取值：<Zrate> 一个合法的数字，负数会取绝对值
• scale(x, y)
  • 说明：指定元素相对当前尺寸的平面缩放比例，为 scaleX(x) 和 scaleY(y) 的复合函数
  • 取值：<Xrate>, <Yrate>
• scale3d(x, y, z)
  • 说明：指定元素相对当前尺寸的3D缩放比例，为 scaleX(x) 、 scaleY(y) 和 scaleZ(z) 的复合函数
  • 取值：<Xrate>, <Yrate>, <Zrate>

旋转 ​

• rotate(deg)
  • 说明：指定元素顺时针旋转的角度，这是一个平面旋转
  • 取值：<num>deg (注：deg 表示 °，如 180deg 表示 180°)
  • TODO: <num>turn xx 圈
• rotateX(x)
  • 说明：指定元素沿 X 轴旋转的角度，这是一个3D旋转
  • 取值：<num>deg
• rotateY(y)
  • 说明：指定元素沿 Y 轴旋转的角度，这是一个3D旋转
  • 取值：<num>deg
• rotateZ(z)
  • 说明：指定元素沿 Z 轴旋转的角度，这是一个3D旋转
  • 取值：<num>deg
• rotate3d(x, y, z, angle)
  • 取值：``

倾斜 ​

• skewX(x)
  • 说明：指定元素沿 X 轴倾斜，这是一个平面倾斜
  • 取值：<num>deg 倾斜角度
• skewY(y)
  • 说明：指定元素沿 Y 轴倾斜，这是一个平面倾斜
  • 取值：<num>deg 倾斜角度
• skew(x, y)
  • 说明：指定元素的倾斜转换，相当于 skewX(x) 和 skew(Y) 的复合函数
  • 取值：<Xangle>, <Yangle>

透视 ​

perspective(len)

• 说明: 指定元素透视效果，定义了元素到 z=0 坐标轴的距离
• 取值: <length>

矩阵 ​

• matrix: 2d 矩阵变化, 具体使用参考 文档
• matrix3d: 3d 矩阵变化，具体使用参考 文档

其他 ​

实验中内容，不做说明

• transform-box
• transform-style