CSS3中的变形处理——transform功能（旋转、缩放、倾斜、移动）

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

浏览器支持：Safari3.1以上、Chrome8以上、Firefox4以上、Opera10以上浏览器支持该属性。 

 

1.旋转

分别使用rotateX方法、rotateY方法、rotateZ方法使元素围绕X轴、Y轴、Z轴旋转，在参数中加入角度值，角度值后面跟表示角度单位的deg文字即可，旋转方向为顺时针旋转。

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="utf-8">
 5         <title>旋转</title>
 6     </head>
 7     <style>
 8         div {
 9             width: 100px;
10             height: 100px;
11             line-height: 100px;
12             text-align: center;
13             background-color: #A4E786;
14             margin: 20px auto;
15             transition: all 1s ease-in-out;
16         }
17 
18         .rotate:nth-child(2):hover {
19             transform: rotate(45deg);
20         }
21 
22         .rotate:nth-child(3):hover {
23             transform: rotateX(45deg);
24         }
25 
26         .rotate:nth-child(4):hover {
27             transform: rotateY(45deg);
28         }
29 
30         .rotate:nth-child(5):hover {
31             transform: rotateZ(45deg);
32         }
33 
34         .rotate:nth-child(6):hover {
35             transform: rotateX(45deg) rotateY(45deg) rotateZ(45deg);
36         }
37 
38         .rotate:nth-child(7):hover {
39             transform: scale(0.5) rotateY(45deg) rotateZ(45deg);
40         }
41 
42         /* 在使用transform方法进行文字或图像变形的时候，是以元素的中心点为基准点进行变形的。 */
43         /* transform-origin属性，可以改变变形的基准点。 */
44         /* 基准点在元素水平方向上的位置属性值：left、center、right */
45         /* 基准点在元素垂直方向上的位置属性值：top、center、bottom */
46         .rotate:nth-child(8):hover {
47             transform: rotate(45deg);
48             transform-origin: left bottom; //把基准点修改为元素的左下角
49         }
50 
51         /* 分别使用rotateX方法、rotateY方法、rotateZ方法使元素围绕X轴、Y轴、Z轴旋转，在参数中加入角度值，角度值后面跟表示角度单位的deg文字即可，旋转方向为顺时针旋转。 */
52     </style>
53     <body>
54         <div class="rotate">1</div>
55         <div class="rotate">2</div>
56         <div class="rotate">3</div>
57         <div class="rotate">4</div>
58         <div class="rotate">5</div>
59         <div class="rotate">6</div>
60         <div class="rotate">7</div>
61         <div class="rotate">8</div>
62     </body>
63 </html>

 

2.缩放

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

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="utf-8">
 5         <title>缩放</title>
 6     </head>
 7     <style>
 8         div {
 9             width: 100px;
10             height: 100px;
11             line-height: 100px;
12             text-align: center;
13             background-color: #B5FEFB;
14             margin: 20px auto;
15             transition: all 1s ease-in-out;
16         }
17 
18         .scale:nth-child(2):hover {
19             transform: scale(0.5);
20         }
21 
22         .scale:nth-child(3):hover {
23             transform: scaleX(0.5);
24         }
25 
26         .scale:nth-child(4):hover {
27             transform: scaleY(0.5);
28         }
29 
30         .scale:nth-child(5):hover {
31             transform: scaleZ(0.5);
32         }
33 
34         .scale:nth-child(6):hover {
35             transform: scaleX(0.5) scaleY(0.5);
36         }
37 
38         .scale:nth-child(7):hover {
39             transform: scaleX(0.5) scaleY(0.5) rotateX(45deg);
40         }
41 
42         /* 分别使用scaleX方法、scaleY方法、scaleZ方法使元素按X轴、Y轴、Z轴进行缩放，在参数中指定缩放倍率。 */
43     </style>
44     <body>
45         <div class="scale">1</div>
46         <div class="scale">2</div>
47         <div class="scale">3</div>
48         <div class="scale">4</div>
49         <div class="scale">5</div>
50         <div class="scale">6</div>
51         <div class="scale">7</div>
52     </body>
53 </html>

 

3.倾斜

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

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="utf-8">
 5         <title>倾斜</title>
 6     </head>
 7     <style>
 8         div {
 9             width: 100px;
10             height: 100px;
11             line-height: 100px;
12             text-align: center;
13             background-color: #DF68C5;
14             margin: 20px auto;
15             transition: all 1s ease-in-out;
16         }
17 
18         .skew:nth-child(2):hover {
19             transform: skew(45deg);
20         }
21 
22         .skew:nth-child(3):hover {
23             transform: skew(30deg, 30deg);
24         }
25 
26         .skew:nth-child(4):hover {
27             transform: skewX(45deg);
28         }
29 
30         .skew:nth-child(5):hover {
31             transform: skewY(45deg);
32         }
33 
34         /* 分别使用skewX方法、skewY方法使元素在X轴、Y轴上进行顺时针方向倾斜（无skewZ方法），在参数中指定倾斜的角度 */
35     </style>
36     <body>
37         <div class="skew">1</div>
38         <div class="skew">2</div>
39         <div class="skew">3</div>
40         <div class="skew">4</div>
41         <div class="skew">5</div>
42     </body>
43 </html>

 

4.移动

分别使用translateX方法、translateY方法、translateZ方法、使元素在X轴、Y轴、Z轴方向上进行移动，在参数中加入移动距离。

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="utf-8">
 5         <title>移动</title>
 6     </head>
 7     <style>
 8         div {
 9             width: 100px;
10             height: 100px;
11             line-height: 100px;
12             text-align: center;
13             background-color: #DF68C5;
14             margin: 20px auto;
15             transition: all 1s ease-in-out;
16         }
17 
18         .translate:nth-child(2):hover {
19             transform: translate(50px);
20         }
21 
22         .translate:nth-child(3):hover {
23             transform: translate(50px, 50px);
24         }
25 
26         .translate:nth-child(4):hover {
27             transform: translateX(50px);
28         }
29 
30         .translate:nth-child(5):hover {
31             transform: translateY(50px);
32         }
33 
34         .translate:nth-child(6):hover {
35             transform: translateZ(50px);
36         }
37 
38         /* 分别使用translateX方法、translateY方法、translateZ方法、使元素在X轴、Y轴、Z轴方向上进行移动，在参数中加入移动距离。 */
39     </style>
40     <body>
41         <div class="translate">1</div>
42         <div class="translate">2</div>
43         <div class="translate">3</div>
44         <div class="translate">4</div>
45         <div class="translate">5</div>
46         <div class="translate">6</div>
47     </body>
48 </html>

 

5.基准点（transform-origin）

没有使用transform-origin改变元素基点位置的情况下，transform进行的rotate,translate,scale,skew,matrix等操作都是以元素自己中心位置进行变化的。

我们需要在不同的位置对元素进行这些操作，那么我们就可以使用transform-origin来对元素进行基点位置改变，使元素基点不在是中心位置，以达到你需要的基点位置。

transform-origin(X,Y):

用来设置元素的运动的基点（参照点）。默认点是元素的中心点。其中X和Y的值可以是百分值,em,px，其中X也可以是字符参数值left,center,right；Y和X一样除了百分值外还可以设置字符值top,center,bottom，这个看上去有点像我们background-position设置一样。

transform-origin并不是transform中的属性值，跟其他的css3属性一样，需要在不同的浏览内核中加上相应的前缀。

 

6.多方法组合变形

同时使用多个转换，综合使用这几个用法其格式为 transform: translate() rotate() scale();

变形的顺序是从左到右依次进行，顺序会影响到转换的效果(先旋转会改变坐标轴方向)，顺序可以随意，不同的顺序导致变形结果不同；

但我们同时有位置或者其他属性的时候，个人习惯将位移放到最前面。

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="utf-8">
 5         <title>多方法组合变形</title>
 6     </head>
 7     <style>
 8         div:nth-child(1) {
 9             width: 100px;
10             height: 100px;
11             line-height: 100px;
12             text-align: center;
13             background-color: #FFC0CB;
14             position: absolute;
15             transition: all 1s ease-in-out;
16         }
17 
18         div:nth-child(1):hover,
19         div:nth-child(2) {
20             width: 100px;
21             height: 100px;
22             line-height: 100px;
23             text-align: center;
24             background-color: #DF68C5;
25             position: absolute;
26             transform: translate(100px, 100px) rotate(45deg) scale(0.5) skew(30deg, 30deg);
27         }
28     </style>
29     <body>
30         <div>变化前</div>
31         <div>变化后</div>
32     </body>
33 </html>
posted @ 2020-03-19 15:30  杵臼  阅读(1382)  评论(0)  编辑  收藏  举报