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>
打赏

免责声明!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系本站邮箱yoyou2525@163.com删除。



 
粤ICP备18138465号  © 2018-2022 CODEPRJ.COM