css3--transform变换

1、translate(x,y) 设置盒子位移
2、scale(x,y) 设置盒子缩放
3、rotate(deg) 设置盒子旋转
4、skew(x-angle,y-angle) 设置盒子斜切
5、perspective 设置透视距离
6、transform-style flat | preserve-3d 设置盒子是否按3d空间显示
7、translateX、translateY、translateZ 设置三维移动
8、rotateX、rotateY、rotateZ 设置三维旋转
9、scaleX、scaleY、scaleZ 设置三维缩放
10、tranform-origin 设置变形的中心点
11、backface-visibility 设置盒子背面是否可见 

 1 <!doctype html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <meta name="viewport"
 6           content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
 7     <meta http-equiv="X-UA-Compatible" content="ie=edge">
 8     <title>transform变换</title>
 9 
10     <style type="text/css">
11         .box1{
12             width:200px;
13             height:200px;
14             margin:20px auto 0;
15             background-color:gold;
16             transition:all 1s ease;
17         }
18 
19         .box1:hover{
20             transform:translate(100px,100px);         /* translate(x,y) 设置盒子位移 */
21         }
22 
23         .box2{
24             width:200px;
25             height:200px;
26             margin:20px auto 0;
27             background-color:gold;
28             transition:all 1s ease;
29         }
30 
31         .box2:hover{
32              transform:scale(0.5,0.2)    /* scale(x,y) 设置盒子缩放*/
33         }
34 
35         .box3{
36             width:200px;
37             height:200px;
38             margin:20px auto 0;
39             background-color:gold;
40             transition:all 1s ease;
41         }
42 
43         .box3:hover{
44             transform:rotate(30deg);    /* rotate(deg) 设置盒子旋转 */
45         }
46 
47         .box4{
48             width:200px;
49             height:200px;
50             margin:20px auto 0;
51             background-color:gold;
52             transition:all 1s ease;
53         }
54 
55         .box4:hover{
56             transform:skew(0deg,15deg);    /* skew(x-angle,y-angle) 设置盒子斜切 */
57         }
58 
59         .box5{
60             width:200px;
61             height:200px;
62             margin:20px auto 0;
63             background-color:gold;
64             transition:all 1s ease;
65 
66             transform-style:preserve-3d;  /* 设置盒子按3d空间显示 */
67             transform:perspective(800px) rotateX(0deg);   /* 设置初始值，避免旋转bug */
68         }
69 
70         .box5:hover{
71             /* Z轴旋转
72             transform:rotate(45deg); */
73             transform:perspective(800px) rotateX(30deg);    /* XY轴旋转,perspective设置透视距离*/
74         }
75 
76     </style>
77 </head>
78 <body>
79 
80 <div class="box1"></div>
81 <div class="box2"></div>
82 <div class="box3"></div>
83 <div class="box4"></div>
84 <div class="box5"></div>
85 
86 </body>
87 </html>

 

 1 <!doctype html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <meta name="viewport"
 6           content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
 7     <meta http-equiv="X-UA-Compatible" content="ie=edge">
 8     <title>tranform-origin</title>
 9 
10     <style type="text/css">
11         div{
12             width:200px;
13             height:200px;
14             background-color:gold;
15             float:left;
16             margin:50px;
17             transition:all 500ms ease;
18         }
19 
20         div:hover{
21             transform:rotate(-90deg);
22         }
23 
24         div:nth-child(1){
25             transform-origin:left center;
26         }
27 
28         div:nth-child(2){
29             transform-origin:left top;
30         }
31 
32         div:nth-child(3){
33             transform-origin:20px 20px;
34         }
35     </style>
36 </head>
37 <body>
38 
39 <div></div>
40 <div></div>
41 <div></div>
42 
43 </body>
44 </html>

 

 1 <!doctype html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <meta name="viewport"
 6           content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
 7     <meta http-equiv="X-UA-Compatible" content="ie=edge">
 8     <title>图片翻面</title>
 9 
10     <style type="text/css">
11 
12         .box{
13             width:300px;
14             height:300px;
15             background-color:gold;
16             margin:50px auto 0;
17             line-height:300px;
18             text-align:center;
19             font-size:24px;
20 
21             transform-style:preserve-3d;
22             transform:perspective(800px) rotateY(0deg);
23             transition:all 500ms ease;
24 
25             backface-visibility:hidden;  /*设置盒子背面不可见 */
26         }
27 
28         body:hover .box{
29             transform:perspective(800px) rotateY(180deg);
30         }
31 
32         /* ----------------------图片翻面------------------ */
33         .con{
34             width:300px;
35             height:272px;
36             margin:50px auto 0;
37             position:relative;
38 
39             transform-style:preserve-3d;
40             transform:perspective(800px) rotateY(0deg);
41         }
42 
43         .pic,.info{
44             width:300px;
45             height:272px;
46             position:absolute;
47             top:0;
48             left:0;
49 
50             transition:all 500ms ease;
51             transform:perspective(800px) rotateY(0deg);
52             backface-visibility:hidden;  /*设置盒子背面不可见 */
53         }
54 
55         .info{
56             background-color:gold;
57             line-height:272px;
58             text-align:center;
59             transform:translateZ(2px) rotateY(180deg);  /* 首先将文字.info作为背面 */
60         }
61 
62         .con:hover .pic{
63             transform:perspective(800px) rotateY(180deg);  /* 将图片.pic转到背面 */
64         }
65 
66         .con:hover .info{
67             transform:perspective(800px) rotateY(0deg);  /* 同时将文字.info从背面再转回来 */
68         }
69     </style>
70 </head>
71 <body>
72 
73 <div class="box">这是一个div</div>
74 
75 <div class="con">
76     <div class="pic"><img src="../images/location_bg.jpg" alt="pic"></div>
77     <div class="info">图片文字说明</div>
78 </div>
79 
80 </body>
81 </html>

 

posted on 2019-11-27 23:20  cherry_ning  阅读(164)  评论(0)    收藏  举报

导航