CSS3 transform-526互联

Transform

Transform字面上就是变形，改变的意思。

transform ： none | <transform-function> [ <transform-function> ]

transform: rotate | scale | skew | translate |matrix;

旋转rotate、扭曲skew、缩放scale和移动translate以及矩阵变形matrix

坐标中心点就是左下角位置。于是动画（例如图片收缩）就是基于左下角这一点了

transform-origin: bottom left;

中心点位置由中间移到了距离左侧50像素，顶部70像素的地方

transform-origin: 50px 70px;

从原点（由tranform-origin属性指定）开始顺时针旋转一个特定角度。

transform: rotate(45deg);

sx横轴缩放，sy纵轴缩放。若sy未指定，默认认为和sx相同。
scaleX(sx) 横轴缩放。等同scale(sx, 1)。
scaleY(sy) 纵轴缩放。等同scale(1, sy)。

/* x轴和y轴缩放比例相同都是2倍 */
transform: scale(2);

/* 横轴缩放2倍 */
transform: scaleX(2);

/* 纵轴缩放2倍 */
transform: scaleY(2);

以原点（tranform-orgin属性指定）为中心，在X轴和Y轴以指定的角度倾斜。若ay未指定，在Y轴上木有倾斜。
细心的同学可能会发现，使用skew也可以实现rotate效果。
skewX(angle)。在X轴方向以一定角度倾斜。
skewY(angle)。在Y轴方向以一定角度倾斜。

transform: skew(45deg, 45edg);
/* 在X轴方向以一定角度倾斜 */
transform: skewX(45deg);
/* 在Y轴方向以一定角度倾斜 */
transform: skewY(45deg);

如果ty木有指定，则默认为0；
translateX(tx)。在X轴方向平移。
translateY(ty)。在Y轴方向平移。

transform: translate(45px, 1em);
/* 在X轴方向平移 */
transform: translateX(45px);
/* 在Y轴方向平移 */
transform: translateY(45px);