1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="utf-8">
5 <title></title>
6 <style>
7 body{
8 margin: 0;
9 }
10 ul{
11 margin: 0;
12 padding: 0;
13 list-style: none;
14 }
15 .wrap{
16 width: 198px;
17 height: 198px;
18 padding: 198px;
19 border: 1px solid black;
20 margin: 200px auto;
21 perspective: 300px;
22 }
23 .wrap ul{
24 width: 198px;
25 height: 198px;
26 position: relative;
27 transition: 10s;
28 transform-style: preserve-3d;
29 transform-origin: center center -99px;
30 }
31 .wrap ul li{
32 width: 198px;
33 height: 198px;
34 position: absolute;
35 font: 50px/100px "微软雅黑";
36 text-align: center;
37 color: #fff;
38 background-image: url(bg.jpg);
39 background-repeat: no-repeat;
40 }
41 .wrap ul li:nth-of-type(1){
42 background-color: red;
43 left: 0;
44 top: -198px;
45 transform-origin: bottom;
46 transform: rotateX(90deg);
47 background-position: -393px -393px;
48 }
49 .wrap ul li:nth-of-type(2){
50 background-color: yellow;
51 left: -198px;
52 top: 0;
53 transform-origin: right;
54 transform: rotateY(-90deg);
55 background-position: 0 -198px;
56 }
57 .wrap ul li:nth-of-type(3){
58 background-color: blue;
59 left: 0;
60 top: 0;
61 transform: translateZ(0px);
62 background-position: -197px -196px;
63 }
64 .wrap ul li:nth-of-type(4){
65 background-color: green;
66 left: 198px;
67 top: 0;
68 transform-origin: left;
69 transform: rotateY(90deg);
70 background-position: -393px -196px;
71 }
72 .wrap ul li:nth-of-type(5){
73 background-color: pink;
74 left: 0;
75 top: 198px;
76 transform-origin: top;
77 transform: rotateX(-90deg);
78 background-position: -589px -196px;
79 }
80 .wrap ul li:nth-of-type(6){
81 background-color: purple;
82 left: 0;
83 top: 0;
84 transform: translateZ(-198px);
85 background-position: -393px 0;
86 }
87 .wrap:hover ul{
88 transform:rotateX(720deg) rotateY(720deg) rotateZ(720deg);
89 }
90 </style>
91 </head>
92 <body>
93 <div class="wrap">
94 <ul>
95 <li>1</li>
96 <li>2</li>
97 <li>3</li>
98 <li>4</li>
99 <li>5</li>
100 <li>6</li>
101 </ul>
102 </div>
103 </body>
104 </html>
效果图：
时间： 2024-10-15 17:05:29