DevShelf

Appearance

transform ​

描述 ​

transform CSS 属性允许您旋转、缩放、倾斜或平移元素。它修改 CSS 视觉格式化模型的坐标空间。

效果展示 ​

语法 ​

css
/* Keyword values */
transform: none;

/* Function values */
transform: matrix(1, 2, 3, 4, 5, 6);
transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
transform: perspective(17px);
transform: rotate(0.5turn);
transform: rotate3d(1, 2, 3, 10deg);
transform: rotateX(10deg);
transform: rotateY(10deg);
transform: rotateZ(10deg);
transform: translate(12px, 50%);
transform: translate3d(12px, 50%, 3em);
transform: translateX(2em);
transform: translateY(3in);
transform: translateZ(2px);
transform: scale(2, 0.5);
transform: scale3d(2.5, 1.2, 0.3);
transform: scaleX(2);
transform: scaleY(0.5);
transform: scaleZ(0.3);
transform: skew(30deg, 20deg);
transform: skewX(30deg);
transform: skewY(1.07rad);

/* Multiple function values */
transform: translateX(10px) rotate(10deg) translateY(5px);
transform: perspective(500px) translate(10px, 0, 20px) rotateY(3

值 ​

  • matrix(a, b, c, d, e, f) 以六个值 a-f 的变换矩阵的形式指定 2D 变换矩阵。
  • matrix3d(a, b, c, d, e, f, g, h, i, j, k, l, m, n, o, p) 将 3D 变换指定为由 16 个值（按列优先顺序）组成的 4x4 齐次矩阵。
  • rotate(angle) 指定围绕元素原点按指定角度进行 2D 旋转，如 Transform-origin 属性所定义。
  • rotate3d(x, y, z, a) 按最后一个参数中指定的角度指定关于前三个参数描述的 [x,y,z] 方向向量的 3D 旋转。
  • rotateX(ax) 按 X 方向指定的角度指定 3D 旋转。相当于 rotate3d(1, 0, 0, ax)。
  • rotateY(ay) 按 Y 方向指定的角度指定 3D 旋转。相当于 rotate3d(0, 1, 0, ay)。
  • rotateZ(az) 按 Z 方向指定的角度指定 3D 旋转。相当于 rotate3d(0, 0, 1, az)。
  • scale(sx[, sy]) 指定由 [sx, sy] 描述的 2D 缩放操作。如果未指定 sy，则假定它等于 sx。
  • scale3d(sx, sy, sz) 通过三个参数描述的 [sx,sy,sz] 缩放向量指定 3D 缩放操作。
  • scaleX(sx) 使用向量 [sx, 1] 指定缩放运算。
  • scaleY(sy) 使用向量 [1, sy] 指定缩放运算。
  • scaleZ(sz) 通过缩放向量 [1,1,sz] 指定 3D 缩放操作。
  • skew(ax[, ay]) 为 X 和 Y 指定 [ax,ay] 的二维倾斜。如果未提供第二个参数，则假定其为零。
  • skewX(angle) 指定沿 X 轴按给定角度进行的 2D 倾斜变换。
  • skewY(angle) 指定沿 Y 轴按给定角度进行的 2D 倾斜变换。
  • translate(tx[, ty]) 通过向量 [tx, ty] 指定 2D 平移。如果未指定 ty，则假定其值为零。
  • translate3d(tx, ty, tz) 指定向量 [tx,ty,tz] 在 X、Y 和 Z 方向上的 3D 平移。
  • translateX(tx) 沿 X 轴将元素平移给定量。
  • translateY(ty) 沿 Y 轴将元素平移给定量。
  • translateZ(tz) 指定 Z 方向上向量 [0,0,tz] 的 3D 平移。
  • perspective(<length>) 指定透视投影矩阵，该矩阵根据 Z 值在 X 和 Y 方向上缩放点。因此，具有正 Z 值的点会远离原点，而具有负 Z 值的点则会朝原点缩放。
  • none 指定不应应用任何变换。