css3中transform属性实现的4种功能

ufile

在CSS3中，可以利用transform功能实现文字或图像的旋转、缩放、倾斜、移动这4中类型的变形处理。
1、浏览器支持

到目前为止：Safari3.1以上、Chrome8以上、Firefox4以上、Opera10以上浏览器支持该属性。　　
3 y( u) T) ~% Q8 ^! z; y2、旋转
3 G% M  I  l/ p" {8 Q4 v, f' H
; j' q4 J8 J5 Q( T* [使用rotate方法，在参数中加入角度值，角度值后面跟表示角度单位的“deg”文字即可，旋转方向为顺时针方向。

1. transform：rotate（45deg）；

复制代码

3、缩放
* d; e6 r% S! y; C& p; F  I
使用scale方法来实现文字或图像的缩放处理，在参数中指定缩放倍率。

1. transform：scale（0.5）；//缩小一半

复制代码

（1）可以分别指定元素的水平方向的放大倍率与垂直方向的放大倍率

1. transform：scale（0.5，2）；//水平方向缩小一半，垂直方向放大一倍。

复制代码

4、倾斜

使用skew方法实现文字或图像的倾斜处理，在参数中分别指定水平方向上的倾斜角度与垂直方向上的倾斜角度。

1. transform：skew（30deg，30deg）；//水平方向上倾斜30度，垂直方向上倾斜30度。

复制代码

（1）只使用一个参数，省略另一个参数
. s: b  X3 P( B这种情况下视为只在水平方向上进行倾斜，垂直方向上不倾斜。

1. transform：skew（30deg）；

复制代码

5、移动

' d' R% ?( Z! @; f7 W/ t使用translate方法来移动文字或图像，在参数中分别指定水平方向上的移动距离与垂直方向上的移动距离。

1. transform：translate（50px，50px）；//水平方向上移动50px，垂直方向上移动50px

复制代码

（1）只使用一个参数，省略另一个参数
% _5 R. k! B7 J这种情况下视为只在水平方向上移动，垂直方向上不移动。

1. transform：translate（50px）；

复制代码

6、对一个元素使用多种变形的方法　　

1. transform：translate（150px，200px）rotate（45deg）scale（1.5）；

复制代码

7、指定变形的基准点

3 y- ?/ y# _: x8 Y  x在使用transform方法进行文字或图像变形的时候，是以元素的中心点为基准点进行变形的。
, ]; j8 W' v4 \+ N/ Ttransform-origin属性
! u9 M9 Y5 a& s) n8 Y使用该属性，可以改变变形的基准点。

1. transform：rotate（45deg）；transform-origin：leftbottom；//把基准点修改为元素的左下角

复制代码

（1）指定属性值
3 K# {  x6 S1 K7 w5 \7 R/ `基准点在元素水平方向上的位置：left、center、right
# V& w1 b8 A: b) Q! T基准点在元素垂直方向上的位置：top、center、bottom
8、3D变形功能
/ m4 ~* i2 r/ c2 b7 W7 K3 x9 a
: y$ I( f  x: L* I3 ]6 `; p（1）旋转
0 d% V6 i8 k7 p4 ^" c5 x: r6 m3 N分别使用rotateX方法、rotateY方法、rotateZ方法使元素围绕X轴、Y轴、Z轴旋转，在参数中加入角度值，角度值后面跟表示角度单位的deg文字即可，旋转方向为顺时针旋转。

1. transform：rotateX（45deg）；transform：rotateY（45deg）；transform：rotateZ（45deg）；transform：rotateX（45deg）rotateY（45deg）rotateZ（45deg）；transform：scale（0.5）rotateY（45deg）rotateZ（45deg）；

复制代码

（2）缩放
分别使用scaleX方法、scaleY方法、scaleZ方法使元素按X轴、Y轴、Z轴进行缩放，在参数中指定缩放倍率。

1. transform：scaleX（0.5）；transform：scaleY（1）；transform：scaleZ（2）；transform：scaleX（0.5）scaleY（1）；transform：scale（0.5）rotateY（45deg）；

复制代码

（3）倾斜
分别使用skewX方法、skewY方法使元素在X轴、Y轴上进行顺时针方向倾斜（无skewZ方法），在参数中指定倾斜的角度

1. transform：skewX（45deg）；transform：skewY（45deg）；

复制代码

（4）移动
3 }9 W2 `, W+ k' C8 {+ t分别使用translateX方法、translateY方法、translateZ方法、使元素在X轴、Y轴、Z轴方向上进行移动，在参数中加入移动距离。

1. transform：translateX（50px）;transform：translateY（50px）;transform：translateZ（50px）;

复制代码

9、变形矩阵
" F. i4 L2 ^* `0 \6 l
每种变形方法的背后都存在着一个对应的矩阵。
  J  z+ p" S& m$ K9 v$ _$ ~. e（1）计算2D变形（3X3矩阵）

1. \begin{bmatrix}a&c&e\\b&d&f\\0&0&1\end{bmatrix}

复制代码

可以将这个2D变形矩阵书写为matrim（a,b,c,d,e,f）,a~f均代表一个数字，用于决定怎样执行变形处理。
（2）平移的2D矩阵

1. \begin{bmatrix}1&0&tx\\0&1&ty\\0&0&1\end{bmatrix}//效果一致：右移150px，下移150pxtransform：matrix（1，0,0,1，150，150）；transform：translate（150px，150px）；

复制代码

（3）计算3D变形
) _, l" V: N& \$ x3D缩放变形使用的4X4矩阵

1. \begin{bmatrix}sx&0&0&0\\0&sy&0&0\\0&0&sz&0\\0&0&0&1\end{bmatrix}transform:matrix3d(sx,0,0,0,0,sy,0,0,0,0,sz,0,0,0,0,1);//效果一致：X轴方向上缩小五分之一，Y轴方向上缩小一半。transform:scale3d(0.8,0.5,1);transform:matrix3d(0.8,0,0,0,0,0.5,0,0,0,0,1,0,0,0,0,1);

复制代码

（4）可通过矩阵执行多重变形处理
将需要的变形矩阵相乘得到一个新的变形矩阵可实现该处理。
到此这篇关于css3中transform属性实现的4种功能的文章就介绍到这了,更多相关css3中transform属性实现内容请搜索脚本之家以前的文章或继续浏览下面的相关文章，希望大家以后多多支持脚本之家！

来源：http://www.jb51.net/css/784776.html
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！