css3 transform 基本属性详解

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);