transform: rotate | scale | skew | translate |matrix;
matrix（矩阵）
根据矩阵参数，对元素（图形）进行变换
先上两个没有基础不太容易看懂的图，就算不理解也没关系，下面有比较通俗的案例可以查看效果。
- 3x3 的变换矩阵
- 对二维向量进行转换
其中 x1、y1 为经过 Matrix 转换后的向量。
如果没有看懂也不要紧，可以自己在项目中试试下面这段代码，根据效果来理解。
#box {
width: 300px;
height: 300px;
background: #dd6100;
margin: 100px auto 0;
// 请大家对下面 matrix 的 6 个参数进行增减试试效果
transform: matrix(1, 0, 0, 1, 0, 0);
}
<div id="box"></div>
由效果得知，在 Matrix 中：
- e,f 主要用于设置元素在 X 轴和 Y 轴上的平移。
- a,d 主要用于设置元素在 X 轴和 Y 轴上的缩放。
- b,c 主要用于设置元素扭曲。
- a,b,c,d 可以共同作用，用于设置元素在 XY 平面上的旋转。
注意：rotate/translate/screw 等都可以直接通过设置 Matrix 来达到同样的效果，它们都不过是将 Matrix 能够实现的效果进行单独封装，方便你使用而已。
translate（平移）
设置元素在 X 轴或者 Y 轴上的平移
#元素沿着 X轴正方向平移 15px，沿着 Y轴正方向平移 25px
translate(100px, 20px)
#效果相同
Matrix(1, 0, 0, 1, 100, 20)
scale（缩放）
设置元素在 X 轴或者 Y 轴上进行缩放
- 一个参数：图形被缩放多少倍，如：
scale(2) - 两个参数 (x,y)，如：
scale(2,2)
# 元素在 X 轴上拉伸为 2 倍，在 Y 轴上缩小位 0.5 倍
scale(2, 0.5)
# 效果相同
Matrix(2, 0, 0, 0.5, 0, 0)
注意：scale 的参数为负数时，元素在对应的方向上进行反转
scaleX 和 scaleY
在 x 轴和 y 轴对元素分别进行缩放
- 图形在 x 轴被缩放多少倍，如
scaleX(2)
- 在 y 轴被缩放多少倍，如
scaleY(2)
rotate、rotateZ（旋转）
二维空间中，围绕顺时针方向旋转
#围绕屏幕法向量顺时针旋转 30度
rotate(30deg)
#效果相同 Sin(30) ≈ 0.866
Matrix(0.866, 0.5, -0.5, 0.866, 0, 0)
transform-origin（旋转原点）
transform 变换原点，只对设置了rotate 的元素有效
rotate(30deg);
// 将元素以左上角点为中心进行旋转
transform-origin: 'left top';
设置 transform-origin 为元素坐上点后，元素围绕左上角旋转
skew
设置 X 方向和 Y 方向的倾斜角度，将元素扭曲
transform:skew(30deg,10deg):
transform 多属性值渲染
transform: translateX(100px) rotate(90deg);
网友评论