CSS Transform
2017-03-11 本文已影响84人
Cruyun
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)
目前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变换：
变换后的横坐标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变换：
变换后的元素坐标为(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)`,上文已证。
