css3 transform

属性：

translate：

含义：元素移动

用法：

  • X轴上的移动，transform:translateX(...px/em/rem/%)，百分比按元素的尺寸，可以任意单位；正数往右，负数往左；
  • Y轴上的移动，transform:translateY(...px/em/rem/%)，百分比按元素的尺寸，可以任意单位；正数往下，负数往上；
  • 同时设置XY轴，transform:translate(X轴，Y轴)
  • Z轴上的移动，transform:translateZ(...px/em/rem)，不能设置百分比！正数往前，负数往后；（一般结合透视、旋转等才看到效果）
  • 同时设置XYZ轴，transform3d:(X轴，Y轴，Z轴)

应用例子：

移动端多视图切换

  1 <!DOCTYPE html>
  2 <html lang="en">
  3 <head>
  4     <meta charset="UTF-8">
  5     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6     <title>移动端多视图切换</title>
  7     <link href="https://cdn.bootcdn.net/ajax/libs/font-awesome/5.8.2/css/all.min.css" rel="stylesheet">
  8     <style>
  9         *{
 10             padding: 0;
 11             margin:0;
 12             box-sizing: border-box;
 13         }
 14         body{
 15             width: 100vw;
 16             height: 100vh;
 17             display: flex;
 18             flex-direction: column;
 19         }
 20         body::after{
 21             content: '欢迎来到这个世界';
 22             left: 50%;
 23             top: 50%;
 24             position: absolute;
 25             transform: translate(-50%,-50%);/*通过移动来居中*/
 26             font-size: 2em;
 27             opacity: .3;
 28         }
 29         main{
 30             flex: 1;
 31             position: relative;
 32         }
 33         nav{
 34             height: 8vh;
 35             background: #34495e;
 36             display: flex;
 37             justify-content: center;
 38             align-items: center;
 39         }
 40         nav a{
 41             text-decoration: none;
 42             font-size: 1.2em;
 43             color: white;
 44             opacity: .8;
 45             text-transform: uppercase;
 46             flex: 1;
 47             text-align: center;
 48         }
 49         nav a:nth-child(2){
 50             border-right: solid 1px silver;
 51             border-left: solid 1px silver;
 52         }
 53         main>div{
 54             position: absolute;
 55             left: 0;
 56             top: 0;
 57             width: 100%;
 58             height: 100%;
 59             display: flex;
 60             flex-direction: column;
 61             justify-content: center;
 62             align-items: center;
 63             transform: translateY(-100%);/*！往上移动，移出可视区域*/
 64             transition: 1s;/*加上过渡时间*/
 65             z-index: 1;
 66         }
 67         main>div:target{
 68             transform: translateY(0px);/*命中时，恢复位置*/
 69         }
 70         main>div:nth-of-type(1):target{
 71             background: #27ae60;
 72         }
 73         main>div:nth-of-type(2):target{
 74             background: #e67e22;
 75         }
 76         main>div:nth-of-type(3):target{
 77             background: #2980b9;
 78         }
 79         i[class^="fa"]{
 80             font-size: 6em;
 81             color: white;
 82         }
 83     </style>
 84 </head>
 85 <body>
 86     <main>
 87         <div id="home">
 88             <i class="fa fa-home" aria-haspopup="true"></i>
 89         </div>
 90         <div id="video">
 91             <i class="fa fa-pen" aria-haspopup="true"></i>
 92         </div>
 93         <div id="live">
 94             <i class="fa fa-camera" aria-haspopup="true"></i>
 95         </div>
 96     </main>
 97     <nav>
 98         <a href="#home">home</a>
 99         <a href="#video">video</a>
100         <a href="#live">live</a>
101     </nav>
102 </body>
103 </html>

 

scale：

含义：元素缩放

用法：

  • X轴上的缩放，transform:scaleX(num)，水平放大/缩小 num 倍
  • Y轴上的缩放，transform:scaleY(num)，垂直放大/缩小 num 倍
  • XY轴上的缩放，transform:scale(X轴，Y轴)
  • Z轴上的缩放，transform:scaleZ(num)，（一般结合透视、旋转等才看到效果），Z轴拉长/缩短 num 倍
  • XYZ轴上的缩放，transform:scale3d(X轴，Y轴，Z轴)

应用例子：

图集效果

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6     <title>图集效果</title>
 7     <style>
 8         *{
 9             padding: 0;
10             margin: 0;
11         }
12         body{
13             width: 100vw;
14             height: 100vh;
15             display: flex;
16             justify-content: center;
17             align-items: center;
18             background: #2c3e50;
19         }
20         main{
21             display: flex;
22             justify-content: center;
23             align-items: center;
24         }
25         div{
26             width: 200px;
27             height: 200px;
28             margin-right: 20px;
29             overflow: hidden;
30             border: solid 2px #95a5a6;
31             transition: 1s;/*对相册里每个元素进行变形的过渡*/
32         }
33         div>img{
34             height: 100%;
35         }
36         main:hover div{
37             transform: scale(.6);/*当鼠标移入图册时，所有div都缩小且产生模糊效果*/
38             filter: blur(15px);
39         }
40         main:hover div:hover{
41             transform: scale(1.6);/*当鼠标移入某个图片时，对图片的div进行放大且取消模糊效果*/
42             filter: none;
43         }
44     </style>
45 </head>
46 <body>
47     <main>
48         <div><img src="./img/adamcatlace.jpg"></div>
49         <div><img src="./img/tiger.jpg"></div>
50         <div><img src="./img/picture.jpg"></div>
51     </main>
52 </html>

 

rotate：

含义：元素旋转

用法：

  • 沿着X轴旋转，transform:rotateX(...deg)，加上透视效果更好，旋转90度时会消失，此时加上3d效果(transform:preserve-3d)能看到Z轴，从而处理这种状况
  • 沿着Y轴旋转，transform:rotateY(...deg)，加上透视效果更好，旋转90度时会消失，此时加上3d效果(transform:preserve-3d)能看到Z轴，从而处理这种状况
  • 沿着Z轴（纵深轴）旋转，transform:rotateZ(...deg) 或者 transform:rotate(...deg)，效果为在平面旋转
  • 通过向量值旋转，transform:rotate3d(x,y,z,...deg) ，x:y:z算比例计算出轴的方向

应用例子：

网站动态LOGO

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6     <title>网站动态LOGO</title>
 7     <style>
 8         *{
 9             padding: 0;
10             margin: 0;
11             box-sizing: border-box;
12         }
13         body{
14             width: 100vw;
15             height: 100vh;
16             display: flex;
17             justify-content: center;
18             align-items: center;
19             background: #2c3e50;
20         }
21         main div{
22             cursor: pointer;
23             color: #ecf0f1;
24             font-size: 2em;
25         }
26         main div>strong{
27             display: inline-block;
28             transition: 1s;/*给元素设置过渡时间*/
29             background: #000;
30             border-radius: 50%;
31             width: 45px;
32             height: 45px;
33             text-align: center;
34         }
35         main div:hover>strong:nth-of-type(1){
36             transform: rotate(360deg);/*旋转*/
37             background: #f1c40f;
38         }
39         main div:hover>strong:nth-of-type(2){
40             transform: rotate(-360deg);/*旋转*/
41             background: #1abc9c;
42         }
43     </style>
44 </head>
45 <body>
46     <main>
47         <div>
48             <strong>m</strong>
49             ai
50             <strong>z</strong>
51             iyin
52         </div>
53     </main>
54 </body>
55 </html>

 

skew：

含义：元素倾斜

用法：

  • X轴倾斜，skewX(...deg)，←X轴
  • Y轴倾斜，skewY(...deg)，↑Y轴

应用例子：

动态按钮

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6     <title>倾斜变形动态按钮</title>
 7     <style>
 8         *{
 9             border: 0;
10             margin: 0;
11             box-sizing: border-box;
12         }
13         body{
14             width: 100vw;
15             height: 100vh;
16             background: #2c3e50;
17             display: flex;
18             justify-content: center;
19             align-items: center;
20         }
21         main{
22             width: 200px;
23             display: flex;
24             justify-content: center;
25             align-items: center;
26         }
27         main a{
28             color: #ecf0f1;
29             font-size: 1.5em;
30             text-decoration: none;
31             border: solid 3px #e74c3c;
32             flex: 1;
33             display: flex;
34             justify-content: center;
35             align-items: center;
36             height: 55px;
37             position: relative;
38             overflow: hidden;/*消除溢出，消除btn伪类的溢出*/
39         }
40         .btn::after{
41             content: '';
42             width: 0;/*宽度为0，效果为消失不见*/
43             height: 100%;
44             position: absolute;
45             transform: skew(45deg);/*增加伪类的倾斜效果*/
46             background: #e74c3c;
47             z-index: -1;
48             transition: .3s;/*增加伪类的过渡效果*/
49         }
50         .btn:hover::after{
51             width: 200%;/*宽度变为父元素的两倍*/
52         }
53     </style>
54 </head>
55 <body>
56     <main>
57         <a href="" class="btn">
58             maiziyin
59         </a>
60     </main>
61 </body>
62 </html>

 

perspective：

含义：透视

用法：

  • 单独给元素设置透视，transform:perspective(...px)
  • 把多个子元素看成一个整体，统一给这个整体设置透视（统一看这个整体）。在子元素的父元素上添加perspective:...px，(只影响子元素，父元素没有透视)
  • ...px单位指元素距离视图的距离，以像素计。

 

preserve-3d：

含义：产生三维空间，绘制Z轴

用法：transform-style:presrve-3d;

 

transform-origin：

含义：变形参考点

用法：

  • 单边变形参考点：transfrom-origin:top/bottom/left/right
  • 2D变形参考点：transfrom-origin:X(left/right/center/xx%/xxpx) Y (left/right/center/...%/...px)
  • 3D变形参考点：transfrom-origin:X(left/right/center/xx%/xxpx) Y (left/right/center/...%/...px) Z(xxpx)

应用例子：

贺卡

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6     <title>贺卡</title>
 7     <style>
 8         *{
 9             padding: 0;
10             margin: 0;
11         }
12         body{
13             width: 100vw;
14             height: 100vh;
15             display: flex;
16             justify-content: center;
17             align-items: center;
18             background: #2c3e50;
19         }
20         .card{
21             width: 300px;
22             height: 200px;
23             background: #e67e22;
24             display: flex;
25             justify-content: center;
26             align-items: center;
27             font-size: 2em;
28             color: #ecf0f1;
29             position: relative;
30             transform-style: preserve-3d;/*绘制Z轴，否则翻转看不见Z轴上的立体效果*/
31             transform: perspective(900px) rotateX(45deg);/*设置透视，再进行卡片的旋转*/
32         }
33         .card::before,.card::after{
34             content: '';
35             background: #e74c3c;
36             width: 50%;
37             height: 100%;
38             position: absolute;
39             transition: 2s;/*设置过渡时间*/
40         }
41         .card::before{
42             content: '新年';
43             left: 0;
44             top: 0;
45             display: flex;
46             align-items: center;
47             justify-content: flex-end;
48             transform-origin: left;/*设置旋转基点为左侧边*/
49             border-right: solid 2px #e67e22;
50             box-sizing: border-box;
51         }
52         .card::after{
53             content: '快乐';
54             right: 0;
55             top: 0;
56             display: flex;
57             align-items: center;
58             justify-content: flex-start;
59             transform-origin: right;/*设置旋转基点为右侧边*/
60         }
61         .card:hover::before{
62             transform: rotateY(-180deg);/*设置左页往左旋转180度*/
63         }
64         .card:hover::after{
65             transform: rotateY(180deg);/*设置右页往右旋转180度*/
66         }
67     </style>
68 </head>
69 <body>
70     <div class="card">maiziyin</div>
71 </body>
72 </html>

 

旋转菜单

  1 <!DOCTYPE html>
  2 <html lang="en">
  3 <head>
  4     <meta charset="UTF-8">
  5     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6     <title>旋转菜单</title>
  7     <link href="https://cdn.bootcdn.net/ajax/libs/font-awesome/5.8.2/css/all.min.css" rel="stylesheet">
  8     <style>
  9         *{
 10             padding: 0;
 11             margin: 0;
 12             list-style: none;
 13         }
 14         body{
 15             background: #2c3e50;
 16             display: flex;
 17             justify-content: center;
 18             align-items: center;
 19             width: 100vw;
 20             height: 100vh;
 21         }
 22         nav{
 23             width: 400px;
 24             height: 400px;
 25             
 26             position: relative;
 27             display: flex;
 28             justify-content: center;
 29             align-items: center;
 30             cursor: pointer;
 31         }
 32         nav::before{
 33             content: '';
 34             background: #e74c3c;
 35             border-radius: 50%;
 36             width: 200px;
 37             height: 200px;
 38             position: absolute;
 39         }
 40         nav::after{
 41             content: '菜单';
 42             background: #e74c3c;
 43             border-radius: 50%;
 44             width: 200px;
 45             height: 200px;
 46             position: absolute;
 47             display: flex;
 48             justify-content: center;
 49             align-items: center;
 50             font-size: 3em;
 51             color: white;
 52         }
 53         nav:hover ul{
 54             transform: scale(1);
 55         }
 56         ul{
 57             transition: .5s;
 58             transform: scale(0);
 59             /* position: absolute;
 60             left: 50%;
 61             top: 50%;
 62             transform: translate(-50%,-50%); */
 63             width: 300px;
 64             height: 300px;
 65             /* background: #000; */
 66         }
 67         ul li{
 68             width: 80px;
 69             height: 80px;
 70             background: #e74c3c;
 71             border-radius: 50%;
 72             position: absolute;
 73             display: flex;
 74             justify-content: center;
 75             align-items: center;
 76             font-size: 3em;
 77             color: white;
 78             transition: 1s;
 79             transform-origin: 150px 150px;
 80         }
 81         nav:hover li:nth-of-type(1){
 82             transform: rotate(40deg);
 83         }
 84         nav:hover li:nth-of-type(1) span{
 85             transform: rotate(320deg);
 86         }
 87         nav:hover li:nth-of-type(2){
 88             transform: rotate(80deg);
 89         }
 90         nav:hover li:nth-of-type(2) span{
 91             transform: rotate(280deg);
 92         }
 93         nav:hover li:nth-of-type(3){
 94             transform: rotate(120deg);
 95         }
 96         nav:hover li:nth-of-type(3) span{
 97             transform: rotate(240deg);
 98         }
 99         nav:hover li:nth-of-type(4){
100             transform: rotate(160deg);
101         }
102         nav:hover li:nth-of-type(4) span{
103             transform: rotate(200deg);
104         }
105         nav:hover li:nth-of-type(5){
106             transform: rotate(200deg);
107         }
108         nav:hover li:nth-of-type(5) span{
109             transform: rotate(160deg);
110         }
111         nav:hover li:nth-of-type(6){
112             transform: rotate(240deg);
113         }
114         nav:hover li:nth-of-type(6) span{
115             transform: rotate(120deg);
116         }
117         nav:hover li:nth-of-type(7){
118             transform: rotate(280deg);
119         }
120         nav:hover li:nth-of-type(7) span{
121             transform: rotate(80deg);
122         }
123         nav:hover li:nth-of-type(8){
124             transform: rotate(3200deg);
125         }
126         nav:hover li:nth-of-type(8) span{
127             transform: rotate(40deg);
128         }
129         nav:hover li:nth-of-type(9){
130             transform: rotate(360deg);
131         }
132 
133     </style>
134 </head>
135 <body>
136     <nav>
137         <ul>
138             <li>
139                 <span>
140                     <i class="fa fa-home" aria-haspopup="true"></i>
141                 </span>
142             </li>
143             <li>
144                 <span>
145                     <i class="fa fa-home" aria-haspopup="true"></i>
146                 </span>
147             </li>
148             <li>
149                 <span>
150                     麦
151                 </span>
152             </li>
153             <li>
154                 <span>
155                     <i class="fa fa-home" aria-haspopup="true"></i>
156                 </span>
157             </li>
158             <li>
159                 <span>
160                     <i class="fa fa-home" aria-haspopup="true"></i>
161                 </span>
162             </li>
163             <li>
164                 <span>
165                     <i class="fa fa-home" aria-haspopup="true"></i>
166                 </span>
167             </li>
168             <li>
169                 <span>
170                     <i class="fa fa-home" aria-haspopup="true"></i>
171                 </span>
172             </li>
173             <li>
174                 <span>
175                     <i class="fa fa-home" aria-haspopup="true"></i>
176                 </span>
177             </li>
178             <li>
179                 <span>
180                     <i class="fa fa-home" aria-haspopup="true"></i>
181                 </span>
182             </li>
183         </ul>
184     </nav>    
185 </body>
186 </html>

 

 

perspective-origin：

含义：透视基点（观看角度：元素不动，人的观察角度动）

用法：perspective-origin:X轴角度 Y轴角度

 

backface-visibitity：

含义：元素背面是否隐藏

用法：背面隐藏：backface-visibitity：hidden

应用例子：

登录注册切换页面

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6     <title>翻转切换页面</title>
 7     <link href="https://cdn.bootcdn.net/ajax/libs/font-awesome/5.9.0/css/all.min.css" rel="stylesheet">
 8     <style>
 9         *{
10             padding: 0;
11             margin: 0;
12         }
13         main{
14             width: 100vw;
15             height: 100vh;
16             /* background: #000; */
17             transform-style: preserve-3d;
18             transform: perspective(900px);
19             transition: 2s;
20         }
21         main.login{
22             transform: perspective(900px) rotateY(0deg);/*旋转0度*/
23         }
24         main.register{
25             transform: perspective(900px) rotateY(180deg);/*旋转180度*/
26         }
27         /* body:hover main{
28             transform: perspective(900px) rotateY(180deg);
29         } */
30         div{
31             position: absolute;
32             width: 100%;
33             height: 100%;
34             background: #000;
35             display: flex;
36             flex-direction: column;
37             justify-content: center;
38             align-items: center;
39             font-size: 4em;
40             text-transform: uppercase;
41             color: white;
42             backface-visibility: hidden;/*背面隐藏*/
43 
44         }
45         div:nth-child(1){
46             background: #8e44ad;
47         }
48         div:nth-child(2){
49             background: #e74c3c;
50             transform: rotateY(180deg);
51         }
52         nav{
53             position: absolute;
54             width: 100%;
55             bottom: 60px;
56             text-align: center;
57         }
58         nav a{
59             padding: 10px 20px;
60             background: #34495e;
61             margin-right: 10px;
62             color: white;
63             text-decoration: none;
64         }
65     </style>
66 </head>
67 <body>
68     <main>
69         <div>
70             <i class="fa fa-home" aria-haspopup="true"></i>
71             login</div>
72         <div>
73             <i class="fa fa-user" aria-haspopup="true"></i>
74             register</div>
75     </main>
76     <nav>
77         <a href="javascript:;" onclick="change('login')">登录</a>
78         <a href="javascript:;" onclick="change('register')">注册</a>
79     </nav>
80     <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.0/jquery.min.js"></script>
81     <script>
82         function change(t){
83             switch(t){
84                 case 'login':
85                 $('main').removeClass().addClass('login');
86                 break;
87                 case 'register':
88                 $('main').removeClass().addClass('register');
89                 break;
90             }
91         }
92     </script>
93 </body>
94 </html>

 

posted @ 2020-09-02 16:17  marilol  阅读(184)  评论(0)  编辑  收藏  举报