Test1.html
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>Document</title>
6 <style>
7 *{
8 margin: 0;
9 padding: 0;
10 }
11 .wrap{
12 margin: 50px auto;
13 width: 200px;
14 padding: 200px;
15 perspective: 800px;
16 border: 1px dashed #333;
17 }
18 .box{
19 position: relative;
20 width: 200px;
21 height: 200px;
22 line-height: 200px;
23 font-size: 100px;
24 text-align: center;
25 color: #fff;
26 font-weight: bold;
27 border: 1px dashed #ccc;
28 transform-style: preserve-3d;
29 transform-origin: center center -100px;/*定位的方式，旋转中心点这样设置，但存在兼容性问题*/
30 transition: 1s;
31 }
32 .box div{
33 position: absolute;
34 width: 200px;
35 height: 200px;
36 }
37 .box div:nth-of-type(1){
38 top: -200px;
39 background-color: red;
40 transform-origin: bottom;
41 transform: rotateX(90deg);
42 }
43 .box div:nth-of-type(2){
44 left: -200px;
45 background-color: green;
46 transform-origin: right;
47 transform: rotateY(-90deg);
48 }
49 .box div:nth-of-type(3){
50 background-color: blue;
51 }
52 .box div:nth-of-type(4){
53 right: -200px;
54 background-color: #333;
55 transform-origin: left;
56 transform: rotateY(90deg);
57 }
58 .box div:nth-of-type(5){
59 bottom: -200px;
60 background-color: yellow;
61 transform-origin: top;
62 transform: rotateX(-90deg);
63 }
64 .box div:nth-of-type(6){
65 background-color: tan;
66 transform: translateZ(-200px) rotateX(180deg);
67 }
68 .wrap:hover .box{
69 transform: rotateX(360deg);
70 }
71 </style>
72 </head>
73 <body>
74 <div class="wrap">
75 <div class="box">
76 <div>1</div>
77 <div>2</div>
78 <div>3</div>
79 <div>4</div>
80 <div>5</div>
81 <div>6</div>
82 </div>
83 </div>
84 </body>
85 </html>
Test2.html
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>Document</title>
6 <style>
7 *{
8 margin: 0;
9 padding: 0;
10 }
11 .wrap{
12 margin: 50px auto;
13 width: 200px;
14 padding: 200px;
15 perspective: 800px;
16 border: 1px dashed #333;
17 }
18 .box{
19 position: relative;
20 width: 200px;
21 height: 200px;
22 line-height: 200px;
23 font-size: 100px;
24 text-align: center;
25 color: #fff;
26 font-weight: bold;
27 border: 1px dashed #ccc;
28 transform-style: preserve-3d;
29 transform-origin: center center -100px;/*定位的方式，旋转中心点这样设置，但存在兼容性问题*/
30 transition: 1s;
31 }
32 .box div{
33 position: absolute;
34 width: 200px;
35 height: 200px;
36 }
37 .box div:nth-of-type(1){
38 top: -200px;
39 background-color: red;
40 transform-origin: bottom;
41 transform: rotateX(90deg);
42 }
43 .box div:nth-of-type(2){
44 left: -200px;
45 background-color: green;
46 transform-origin: right;
47 transform: rotateY(-90deg);
48 }
49 .box div:nth-of-type(3){
50 background-color: blue;
51 }
52 .box div:nth-of-type(4){
53 right: -200px;
54 background-color: #333;
55 transform-origin: left;
56 transform: rotateY(90deg);
57 }
58 .box div:nth-of-type(5){
59 bottom: -200px;
60 background-color: yellow;
61 transform-origin: top;
62 transform: rotateX(-90deg);
63 }
64 .box div:nth-of-type(6){
65 background-color: tan;
66 transform: translateZ(-200px) rotateX(180deg);
67 }
68 .wrap:hover .box{
69 transform: rotateX(360deg);
70 }
71 </style>
72 </head>
73 <body>
74 <div class="wrap">
75 <div class="box">
76 <div>1</div>
77 <div>2</div>
78 <div>3</div>
79 <div>4</div>
80 <div>5</div>
81 <div>6</div>
82 </div>
83 </div>
84 </body>
85 </html>
Test3.html
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>Document</title>
6 <style>
7 /*不用麻烦设置left，top等值*/
8 .wrap{
9 margin: 0 auto;
10 width: 200px;
11 height: 200px;
12 padding: 200px;
13 border: 1px solid #333;
14 perspective: 800px;/*!!!*/
15 }
16 .box{
17 width: 200px;
18 height: 200px;
19 position: relative;
20 transform-style: preserve-3d;/*!!!*/
21 transition: 3s all;
22 transform: translateZ(-100px) rotateX(0);
23 }
24 .box div{
25 width: 200px;
26 height: 200px;
27 line-height: 200px;
28 color: #fff;
29 position: absolute;
30 font-size: 100px;
31 text-align: center;
32 }
33 .box div:nth-of-type(1){
34 background-color: red;
35 transform: translateZ(100px);
36 }
37 .box div:nth-of-type(2){
38 background-color: blue;
39 transform-origin: top;
40 transform: translateZ(-100px) rotateX(90deg);/*!!!先移到最里面再操作能保证数字是正的，然后再向前移动，然后再控制其父向后移动*/
41 }
42 .box div:nth-of-type(3){
43 background-color: yellow;
44 transform: translateZ(-100px) rotateX(180deg);/*!!!*/
45 }
46 .box div:nth-of-type(4){
47 background-color: green;
48 transform-origin: bottom;
49 transform: translateZ(-100px) rotateX(-90deg);/*!!!*/
50 }
51 .wrap:hover .box{
52 transform: translateZ(-100px) rotateX(270deg);
53 }
54 </style>
55 </head>
56 <body>
57 <div class="wrap">
58 <div class="box">
59 <div>1</div>
60 <div>2</div>
61 <div>3</div>
62 <div>4</div>
63 </div>
64 </div>
65 </body>
66 </html>
时间： 2024-11-13 10:00:57