3d模块 

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <style>
 7         *{
 8             margin: 0;
 9             padding: 0;
10             list-style: none;
11         }
12         ul{
13             width: 300px;
14             height: 300px;
15             margin: 100px auto;
16             position: relative;
17             transform-style: preserve-3D;
18             perspective: 0px;
19             transform: rotateX(0deg) rotateX(0deg);
20             animation:move 5s linear 0.5s infinite alternate;
21         }
22         li {
23             width: 300px;
24             height: 300px;
25             font-size:50px;
26             position: absolute;
27             opacity: 0.7;
28         }
29         li:nth-of-type(1){
30             background-color: red;
31             transform: translateZ(150px);
32         }
33         li:nth-of-type(2){
34             background-color: blue;
35             transform:translateX(150px) rotateY(90deg);
36         }
37         li:nth-of-type(3){
38             background-color: pink;
39             transform:translateX(-150px) rotateY(-90deg);
40         }
41         li:nth-of-type(4){
42             background-color: skyblue;
43             transform:translateY(150px) rotateX(90deg);
44         }
45         li:nth-of-type(5){
46             background-color: yellow;
47             transform:translateY(-150px) rotateX(90deg);
48         }
49         li:nth-of-type(6){
50             background-color: green;
51             transform: translateZ(-150px) rotateY(180deg);
52         }
53         @keyframes move {
54             from{
55                 transform: rotateX(0deg) rotateY(0deg);
56             }
57             to{
58                 transform: rotateX(360deg) rotateY(360deg);
59             }
60         }
61     </style>
62 </head>
63 <body>
64 <ul>
65     <li></li>
66     <li></li>
67     <li></li>
68     <li></li>
69     <li></li>
70     <li></li>
71 </ul>
72 </body>
73 </html>

 

posted @ 2017-09-15 15:49  曦阳~  阅读(101)  评论(0)    收藏  举报