150px

css3中transform属性实现的4种功能（旋转、缩放、倾斜、移动）

本篇⽂章给⼤家带来的内容是关于css3中transform属性实现的4种功能（旋转、缩放、倾斜、移动），有⼀定的参考价值，有需要的朋友

可以参考⼀下，希望对你有所帮助。

1transform属性

在CSS3中，可以利⽤transform功能实现⽂字或图像的旋转、缩放、倾斜、移动这4中类型的变形处理。

（1）浏览器⽀持

到⽬前为⽌：Safari3.1以上、Chrome8以上、Firefox4以上、Opera10以上浏览器⽀持该属性。

2旋转

使⽤rotate⽅法，在参数中加⼊⾓度值，⾓度值后⾯跟表⽰⾓度单位的“deg”⽂字即可，旋转⽅向为顺时针⽅向。

transform：rotate（45deg）；

3缩放

使⽤scale⽅法来实现⽂字或图像的缩放处理，在参数中指定缩放倍率。

transform：scale（0.5）；//缩⼩⼀半

（1）可以分别指定元素的⽔平⽅向的放⼤倍率与垂直⽅向的放⼤倍率

transform：scale（0.5，2）；//⽔平⽅向缩⼩⼀半，垂直⽅向放⼤⼀倍。

4倾斜

使⽤skew⽅法实现⽂字或图像的倾斜处理，在参数中分别指定⽔平⽅向上的倾斜⾓度与垂直⽅向上的倾斜⾓度。

transform：skew（30deg，30deg）；//⽔平⽅向上倾斜30度，垂直⽅向上倾斜30度。

（1）只使⽤⼀个参数，省略另⼀个参数

这种情况下视为只在⽔平⽅向上进⾏倾斜，垂直⽅向上不倾斜。

transform：skew（30deg）；

5移动

使⽤translate⽅法来移动⽂字或图像，在参数中分别指定⽔平⽅向上的移动距离与垂直⽅向上的移动距离。

transform：translate（50px，50px）；//⽔平⽅向上移动50px，垂直⽅向上移动50px

（1）只使⽤⼀个参数，省略另⼀个参数

这种情况下视为只在⽔平⽅向上移动，垂直⽅向上不移动。

transform：translate（50px）；

6对⼀个元素使⽤多种变形的⽅法

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

7指定变形的基准点

在使⽤transform⽅法进⾏⽂字或图像变形的时候，是以元素的中⼼点为基准点进⾏变形的。

transform-origin属性

使⽤该属性，可以改变变形的基准点。

transform：rotate（45deg）；

transform-origin：leftbottom；//把基准点修改为元素的左下⾓

（1）指定属性值

基准点在元素⽔平⽅向上的位置：left、center、right

基准点在元素垂直⽅向上的位置：top、center、bottom

83D变形功能

（1）旋转

分别使⽤rotateX⽅法、rotateY⽅法、rotateZ⽅法使元素围绕X轴、Y轴、Z轴旋转，在参数中加⼊⾓度值，⾓度值后⾯跟表⽰⾓度单位的

deg⽂字即可，旋转⽅向为顺时针旋转。

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轴进⾏缩放，在参数中指定缩放倍率。

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⽅法），在参数中指定倾斜的⾓度

transform：skewX（45deg）；

transform：skewY（45deg）；

（4）移动

分别使⽤translateX⽅法、translateY⽅法、translateZ⽅法、使元素在X轴、Y轴、Z轴⽅向上进⾏移动，在参数中加⼊移动距离。

transform：translateX（50px）;

transform：translateY（50px）;

transform：translateZ（50px）;

9变形矩阵

每种变形⽅法的背后都存在着⼀个对应的矩阵。

（1）计算2D变形（3X3矩阵）

begin{bmatrix}a&c&eb&d&f0&0&1end{bmatrix}

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

（2）平移的2D矩阵

begin{bmatrix}1&0&tx0&1&ty0&0&1end{bmatrix}

//效果⼀致：右移150px，下移150px

transform：matrix（1，0,0,1，150，150）；

transform：translate（150px，150px）；

（3）计算3D变形

3D缩放变形使⽤的4X4矩阵

begin{bmatrix}sx&0&0&00&sy&0&00&0&sz&00&0&0&1end{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）可通过矩阵执⾏多重变形处理

将需要的变形矩阵相乘得到⼀个新的变形矩阵可实现该处理。