所谓元素转换，事实上就是对元素的坐标在二维或三维空间上做矩阵换算。依据换算的结果，又分成了多种转换类型。但不管是哪一种。都不影响元素在页面上的物理空间。仅仅改变元素的视觉效果。

也就是说，比方元素缩放、旋转都不影响周围其它元素的布局。有些人喜欢用平移做元素居中效果，事实上非常不妥，由于元素原来的物理空间还在那里，控制起来不轻松。

另外。转换属性（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才干看到。