前言及Transform 基本介绍

MDN官方文档介绍：CSS中transform 属性允许你修改CSS可视化模型的坐标空间。通过transform，可以让元素进行移动（translate）、旋转（rotate）、缩放（scale）、拉伸（skew）。本文主要介绍2D transform的基本用法及其属性的原理。

浏览器兼容性

• Internet Explorer 10、Firefox、Opera 支持 transform 属性
• Internet Explorer 9 支持替代的 -ms-transform 属性（仅适用于 2D 变换）。
• Safari 和 Chrome 支持替代的 -webkit-transform 属性（3D 和 2D 变换）。
• Opera 只支持 2D 变换。

属性

skew

• transform: skew(ax,ay)元素在X轴和Y轴负方向以指定的角度拉伸
• transform: skew(ax)元素在X轴负方向以指定的角度拉伸
• transform: skewX(ax)在X轴负方向以指定的角度拉伸
• transform: skewY(ay)在Y轴负方向以指定的角度拉伸
  ax为x方向的角度，ay为y方向的角度，如：
• transform: skew(20deg, 20deg);
• transform: skew(2rad, 1.8rad);
• transform: skew(20deg);
• transform: skew(-20deg)
  demo在此

rotate

绕着Transform-origin点顺时针旋转，中心点初始值为50% 50%

• transform: rotate(<angle>)
• transform: rotate('a'turn)角度为’a’ * 360°，’a’为小于1的数。例如transform: rotate(0.5turn)即transform: rotate(180deg)
  demo在此

skew和rotate的异同：

• 接受的参数单位都是角度,如20deg，1rad；
• skew接受两个参数或一个参数，rotate的语法是：transform: rotate(<angle>);
• skew会使元素变形，rotate不会

translate

• transform:translate(tx[, ty])在X轴\Y轴平移指定距离，用向量[tx, ty]完成2D平移，若没有ty则默认为0
• transform:translateX(tx)沿X轴正方向平移指定距离
• transform:translateY(ty)沿Y轴正方向平移指定距离
  tx\ty的单位可以为px\百分比。
  demo在此

scale

• transform: scale(sx[, sy]);由[sx, sy]描述指定一个二维缩放操作。如果sy 未指定，默认认为和sx的值相同。
• transform: scaleX(sx);使用向量[sx, 1] 完成在X方向上的缩放.

• transform: scaleY(sy);使用向量[1, sy] 完成在Y方向的缩放.
  以transform-origin（初始值为50% 50%）为中心点进行缩放，向量坐标值大于1或小于-1时，在相应方向放大，坐标值处于区间（-1, 1）时缩小，值为1时不做变化。如果缩放向量的两个坐标是相等的，那么X和Y方向的缩放是均等的，所以元素的形状被保持。
  demo在此

  ps: transform: scale(-1)可以实现180°镜像对称效果
  

matrix

• 语法：transform: matrix(a, c, b, d, tx, ty)

• a, c, b, d是一个二维矩阵:
  ┌ a b ┐
  └ c d ┘
  tx, ty就是基于X和Y坐标重新定位元素。

• 用法：设变换的中心点为（x，y）,长度值tx、ty创建向量[tx,ty]，a,b,c,d,tx,ty创建矩阵
  

变换后的中心点坐标(x’, y’)
举个例子：transform: matrix(1, 0, 0, 1, 20, 20) 变换后的中心点横纵坐标:x’ = 1 0 + 0 0 + 20 = 20, y’ = 0 0 + 0 1 + 20 = 20，中心点坐标(0, 0) → (20, 20)
demo
因为中心点坐标初始值为(0, 0)，则变换后的中心点坐标为(tx, ty)，相当于用向量[tx,ty]进行坐标变换。transform:matrix(a, c, b, d, tx, ty)的变换效果等同于transform: translate(tx, ty), abcd的值与变换无关。
注意translate的参数需要单位，而matrix的参数的单位可省略。

Matrix与skew、scale、rotate、translate

skew与matrix、

transform: matrix(1 tan(θy) tan(θx) 1 0 0)的变换效果等同于transform: skew( α + θx, β + θy)
设元素的原坐标为(x, y)，进行matrix变换：

变换后的横坐标x’ = x+ytan(θx) ，纵坐标y’ = xtan(θy)+y

scale与matrix

transform: matrix(sx 0 0 sy 0 0)的变换效果等同于 transform: scale(sx, sy)
设元素的原坐标为(x, y)，进行matrix变换：
变换后的元素坐标为(sx x; sy y)，即x和y变为原来的sx、sy倍。

rotate与matrix

transform: matrix(cosα sinα -sinα cosα 0 0)的变换效果等同于transform: rotate(α)
设元素的原坐标为(x, y)，进行matrix变换：
变换后的横纵坐标分别为x’ = x cosα - y sinα, y’ = x sinα + y cosα

translate与matrix

transform: matrix(1 0 0 1 tx ty)的变换效果等同于transform: translate(tx, ty),上文已证。