css 利用animation和transform 设置复仇者魔方效果
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="utf-8">
5 <title></title>
6 <style>
7
8 html{
9 perspective: 800px;
10 }
11
12 @keyframes round{
13 from{transform: rotateX(0deg) rotateY(0deg);}
14 to{transform: rotateX(360deg) rotateY(360deg);}
15 }
16
17 .cube{
18 width: 200px;
19 height: 200px;
20 margin: 150px auto;
21
22 /*
23 默认情况下，元素的变形都属于2d变形，没有应用3d效果
24 transform-style: preserve-3d; 开启元素的3d变形
25 */
26 transform-style: preserve-3d;
27 /* transition: all 2s; */
28
29 animation: round 20s linear infinite;
30 }
31
32 /* .cube:hover{
33 transform: rotateX(45deg) rotateY(45deg);
34 } */
35
36 img{
37 vertical-align: top;
38 }
39
40 .cube div{
41 transition: all 1s;
42 /* 开启绝对定位 */
43 position: absolute;
44 /* 设置图片的透明 */
45 opacity: .8;
46 }
47
48 .cube div:nth-child(1){
49 transform: rotateY(90deg) translateZ(100px);
50 }
51
52 .cube div:nth-child(2){
53 transform: rotateY(-90deg) translateZ(100px);
54 }
55
56 .cube div:nth-child(3){
57 transform: rotateX(-90deg) translateZ(100px);
58 }
59
60 .cube div:nth-child(4){
61 transform: rotateX(90deg) translateZ(100px);
62 }
63
64 .cube div:nth-child(5){
65 transform: rotateY(180deg) translateZ(100px);
66 }
67
68 .cube div:nth-child(6){
69 transform: translateZ(100px);
70 }
71
72
73 </style>
74 </head>
75 <body>
76 <div class="cube">
77 <div>
78 <img src="img/1.jpg">
79 </div>
80
81 <div>
82 <img src="img/2.jpg">
83 </div>
84
85 <div>
86 <img src="img/3.jpg">
87 </div>
88
89 <div>
90 <img src="img/4.jpg">
91 </div>
92
93 <div>
94 <img src="img/5.jpg">
95 </div>
96
97 <div>
98 <img src="img/6.jpg">
99 </div>
100 </div>
101 </body>
102 </html>
效果
内容
1.元素旋转后，x轴，y轴，z轴会发生变化，往那边旋转那边就为正面
以上就是css 利用animation和transform 设置复仇者魔方的全部内容。
THE END
