CSS高级属性
1.旋转，缩放，移动
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>Document</title>
9 <style>
10 #div1{
11 width: 200px;
12 height: 200px;
13 background: red;
14 margin: 100px auto;
15 transform: scale(2);/*缩放2倍*/
16 /*transform: translate(100px,200px);!*移动 向右移动100px 向下移动200px*!*/
17 transform: rotate(45deg);/*旋转45度*/
18 }
19 </style>
20 </head>
21 <body>
22 <div id="div1"></div>
23 </body>
24 </html>
效果：
2.动画效果
用@keyframes xxx{
form{}
to{}
}进行定义动画
用
animation: 进行调用
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>Title</title>
6 <style>
7 @keyframes move {
8 0%{
9 transform: rotate(0);
10 }
11 50%{
12 transform: rotate(360deg);
13 }
14
15 to{
16 transform: rotate(0);
17 }
18 }
19 #div1{
20 width: 300px;
21 height: 300px;
22 margin: 100px auto 0;
23 background: blue;
24 animation: move 2s linear 3s infinite/*延迟时间*/;/*linear 匀速运动 easy-in 慢 easy-out 快*/
25 }
26 </style>
27 </head>
28 <body>
29 <div id="div1"></div>
30 </body>
31 </html>
3.3D效果：
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>Title</title>
6 <style>
7 @keyframes move {
8 from{
9 transform: rotateY(0);
10 }
11 50%{
12 transform: rotateY(18deg) rotateX(30deg);
13 }
14 to{
15 transform: rotateY(360deg);
16 }
17 }
18 #box{
19 width: 300px;
20 height: 300px;
21 border: 1px solid red;
22 margin: 100px auto;
23 position: relative;
24 text-align:center;
25 line-height: 300px;
26 font-size: 100px;
27 transform-style: preserve-3d;/*打开3D开关*/
28 animation: move 5s linear infinite;
29 }
30 #box>div{
31 width: 100%;
32 height: 100%;
33 position: absolute;
34 top: 0;
35 left: 0;
36 }
37 #box>div:nth-child(1){
38 background: pink;
39 transform: translateZ(150px);
40 }
41 #box>div:nth-child(2){
42 background: yellow;
43 transform: rotateY(180deg) translateZ(150px);
44 }
45 #box>div:nth-child(3){
46 background: blue;
47 }
48 #box>div:nth-child(4){
49 background: rebeccapurple;
50 }
51 #box>div:nth-child(5){
52 background: chocolate;
53 }
54 #box>div:nth-child(6){
55 background: aqua;
56 }
57 </style>
58 </head>
59 <body>
60 <div id="box">
61 <div>前</div>
62 <div></div>
63 <div></div>
64 <div></div>
65 <div></div>
66 <div></div>
67 </div>
68 </body>
69 </html>