元素转换-Transform

所谓元素转换，其实就是对元素的坐标在二维或三维空间上做矩阵换算。根据换算的结果，又分成了多种转换类型。但无论是哪一种，都不影响元素在页面上的物理空间，只改变元素的视觉效果。也就是说，比如元素缩放、旋转都不影响周围其他元素的布局。有些人喜欢用平移做元素居中效果，其实非常不妥，因为元素原来的物理空间还在那里，控制起来不轻松。

另外，转换属性（transform）只有一个。也就是说，如果之前做了旋转（rotate），如果再做平移（translate），旋转效果就会消失。如果既想平移，又想旋转，必须使用matrix或matrix3d方法。但也不是不能叠加，只是多个效果需用空格分开，比如：transform:rotateY(90deg) translateZ(50px);

无论是二维还是三维，记住，所有这些转换基于的是笛卡尔坐标左手系（而且是沿X轴翻转了180度的左手系），而不是右手系。如果你不清楚左手系和右手系，请查度娘。

设置转换原点

转换原点在缩放、倾斜和旋转中很重要，具体参考各转换。转换原点默认是元素的中心，即transform-origin: 50% 50% 0。

转换矩阵

在二维空间中，转换矩阵是一个3x3矩阵；在三维空间中，是4x4矩阵。下面这个公式左边的2x2矩阵，就是一个转换矩阵，因为是2x2的，所以只能做缩放、旋转、倾斜，不能做平移。因此，实际上，浏览器使用的是3x3或4x4的矩阵。

矩阵右边(x,y)是原坐标，(ax+cy, bx+dy)是转换后的坐标。

CSS 2D transforms

Translating –平移

平移和position:relative效果相似，不影响元素的物理空间位置，只影响视觉空间位置，也就是说虽然看起来元素已经离开了原来的位置，但它所占的物理空间依然是原来位置，并且只在原位置上对其他元素有影响。

平移的距离即可以使用像素值，也可使用百分比。如果是百分比，则盒子的宽高（width & height）决定了百分比的最终值，其中，水平位移取决于盒子宽度，垂直位移取决于盒子高度。

transform: translate(50px, 100px);

transform: translateX(50px);

transform: translateY(50%);

transform: translateY(100px);

在不支持的浏览器中，使用position:relative，然后通过top和left即可以调整。

Scaling – 缩放

缩放即指放大或缩小，但效果只相当于用放大镜看，元素所占的物理空间依然没有变化。因此，放大或缩小元素，不影响周围其他元素的布局。

当然，放大缩小也是有方向的，因为原点默认是中心点，所以默认是中心向四周放大。如果要修改放大缩小方向，需要修改transform-origin。

如果有一个值为0，那么这个元素就看不到了；如果scale只接受了一个参数，表示x和y方向缩放同样倍数。

transform: scale(2.5);

transform: scale(2, 1);

transform: scaleX(2);

transform-origin: left top;

Skewing – 倾斜

倾斜有向X轴倾斜和向Y轴倾斜，其中向X轴倾斜在视觉上是逆时针扭曲，向Y轴倾斜在视觉上是顺时针扭曲。因此，如果X轴和Y轴倾斜角度相同，而正负相反，则等同于旋转（rotate），旋转方向由第一个值决定。

倾斜逻辑：一个维度倾斜的时候，另一个维度的大小保持不变。比如，skew(30deg)，表示向X轴方向倾斜30度，但元素的纵轴高度保持不变。因此，对于skew(30deg)，第一象限空间的变换公式为x=x+y*tan(30deg)。

transform: skew(30deg);

transform: skew(30deg, 0);

transform: skew(30deg, -30deg);

注意：倾斜没有3D转换。

Rotating – 旋转

二维旋转其实就是在三维空间上绕Z轴旋转，旋转方向为顺时针方向，原点默认是元素的中心点，因为transform-origin的默认值为transform-origin:50% 50% 0。如果要把左上角设为原点，则应该设置transform-origin为transform-origin: 0 0 0。

transform: rotate(30deg);

CSS 3D transform

以下提到的3D转换，在IE9都不支持。

Translating -平移

沿X和Y轴的平移是二维就支持的，这里主要讲如何沿Z轴平移。想要看到3D效果的沿Z轴平移效果，首先父元素需要设置perspective，即元素前面离用户的距离是多少。现在假设perspective为正值，即perspective>0px。如果translateZ(shift)中，shift小于perspective，则表示元素依然在用户眼睛正前方，用户始终可以看到元素。如果shift大于perspective，则表示元素已经已到了用户的后面，用户看不到这个元素了。

而且你会发现shift在小于perspective的情况下，如果shift值越大，元素看起来也越大，这符合人眼看由远及近的物体时所看到的情况。

另外，注意z轴坐标和z-index完全是两码事，互不影响。

transform: translate3d(50px, 100px, 0);

Scaling - 缩放

3D缩放需要注意的是缩放原点，原点决定了缩放方向，对视觉效果影响很大。

Rotating – 旋转

同样，要想看到3D旋转效果，也需要父元素设置有perspective样式，否则转换方法rotate3d()、rotateX、rotateY、rotateZ的效果和在二维空间一样，而且rotateX和roateY在二维空间是无效的。不过这不妨碍rotate3d和rotateZ可以做XY二维空间换算，比如，rotate3d(0, 0, 1, 10deg)就可以让元素在二维空间上顺时针旋转10度，同理，rotateZ(10deg)也可以让元素在二维空间上顺时针旋转10度。

transform: rotate3d(0, 0, 1, 30deg);

注意：ie9不支持rotate3d、rotateX、rotateY、rotateZ方法。

Perspective - 透视

透视距离表示z=0平面和用户之间的距离，perspective>0表示z=0平面在用户前面，否则在用户后面，这时用户就看不到这个元素了。

<div style="perspective: 50px;">
    <div style="translateZ(20px);">content</div>
</div>

上面这段代码表示z=0平面离用户50个像素，而content离z=0平面20个像素，也就是说现在content离用户只有30个像素。因此，用户看到的content比正常的要大。另外transform:perspective(50px)+transform-style:preserve-3d效果等同于perspective:50px。

但perspective:50px和transform:perspective(50px)有一个很大的区别，就是perspective属性的原点是perspective-origin，而transform的原点是tranform-origin。

兼容性

早版本的Firefox、Chrome、Opera或IE，分别使用一下前缀兼容：

-moz-transform: rotate(30deg);

-o-transform: rotate(30deg);

-webkit-transform: rotate(30deg);

-ms-transform: rotate(30deg);

transform: rotate(30deg);

IE

IE的BasicImage滤镜支持四个旋转值：0,1, 2, 和 3分别对应0, 90, 180和 270度。

filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);

另外，IE有一个矩阵滤镜，也可以做到CSS的transform效果，具体参考：https://msdn.microsoft.com/en-us/library/ms533014%28VS.85,loband%29.aspx。

如果自己算不来，这里还有一个工具可以帮助你计算：http://www.useragentman.com/IETransformsTranslator/。注意，用高版本的IE在兼容模式下不一定能看这些效果，需要真实的该版本IE才能看到。