CSS Transform（上：2D Transform）

前言及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在此

目前Chrome 38+/ Opera 25+ ，我们还可以使用calc() 属性，例如transform: rotate(calc(0.25turn - 30deg))

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的参数的单位可省略。

Multiple values 同时使用多个属性

如```
.element{
width: 100px;
height: 200px;
transform: scale(2) skew(-20deg);
}

[demo](http://codepen.io/cruyun/pen/zZwWgP)
[CSS Tricks](https://css-tricks.com/almanac/properties/t/transform/) 提到：It’s worth noting that there is an order in which these transforms will be carried out, in the example above `skew` will be performed first and then the element will be scaled.

##Matrix与skew、scale、rotate、translate
**skew与matrix**、
`transform: matrix(1 tan(θy) tan(θx) 1 0 0)`的变换效果等同于`transform: skew( α + θx,  β + θy)`
设元素的原坐标为(x, y)，进行matrix变换：![](http:https://img.haomeiwen.com/i4938344/242de94fa8b90ce1.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

变换后的横坐标x' = x+y*tan(θx) ，纵坐标y' = x*tan(θy)+y

**scale与matrix**
`transform: matrix(sx 0 0 sy 0 0)`的变换效果等同于 `transform: scale(sx, sy)`
设元素的原坐标为(x, y)，进行matrix变换：![](http:https://img.haomeiwen.com/i4938344/5d205362d2069c34.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
变换后的元素坐标为(sx * x; sy * y)，即x和y变为原来的sx、sy倍。

**rotate与matrix**
`transform: matrix(cosα sinα -sinα cosα 0 0)`的变换效果等同于`transform: rotate(α)`
设元素的原坐标为(x, y)，进行matrix变换：![](http:https://img.haomeiwen.com/i4938344/30b97e0090aae128.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
变换后的横纵坐标分别为x' = x * cosα - y * sinα, y' = x * sinα + y * cosα

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