CSS matrix() 函数

定义和用法

CSS 的 matrix() 函数通过包含六个值的矩阵来定义一个二维变换。

matrix() 函数接受六个参数，这些参数允许您对元素进行旋转、缩放、移动和倾斜操作。

参数如下：matrix(scaleX(), skewY(), skewX(), scaleY(), translateX(), translateY())。

实例

例子 1

使用 matrix() 为几个 <div> 元素定义二维变换：

#myDiv1 {
  transform: matrix(1, -0.3, 0, 1, 0, 50);
}

#myDiv2 {
  transform: matrix(1, 0, 0.5, 1, 50, 50);
}

#myDiv3 {
  transform: matrix(2, 1, 0.5, 1, 90, 70);
}

亲自试一试

例子 2

使用 matrix() 为图像创建二维变换：

#img1 {
  transform: matrix(1, -0.3, 0, 1, 0, 50);
}

#img2 {
  transform: matrix(1, 0, 0.5, 1, 50, 50);
}

#img3 {
  transform: matrix(2, 1, 0.5, 1, 90, 70);
}

亲自试一试

CSS 语法

matrix(scaleX(), skewY(), skewX(), scaleY(), translateX(), translateY())

技术细节

浏览器支持

表格中的数字表示首个完全支持该函数的浏览器版本。

相关页面

参考：CSS transform 属性

参考：CSS matrix3d() 函数

教程：CSS 2D 变换