css 3d box 实现的一些注意事项

最新推荐文章于 2025-08-02 16:44:00 发布

weixin_30790841

最新推荐文章于 2025-08-02 16:44:00 发布

阅读量54

点赞数

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/jiujiaoyangkang/p/5809818.html

本文介绍了一种使用CSS实现3D立方体翻转效果的方法。通过设置不同的旋转角度和变换原点，使得六个面构成的立方体能够在鼠标悬停时完成翻转动画。文章提供了详细的CSS样式设置及HTML结构。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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>