首页 > 代码库 > 元素转换-Transform

元素转换-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才干看到。

元素转换-Transform