CSS3特效——六面体

最新推荐文章于 2023-11-26 01:36:05 发布

weixin_30421525

最新推荐文章于 2023-11-26 01:36:05 发布

阅读量341

点赞数

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/web-wjg/p/7136837.html

本文介绍了一个使用HTML和CSS实现的3D立方体动画案例。该案例通过设置不同的旋转角度来展示立方体的六个面，并利用关键帧动画实现连续旋转效果。详细介绍了各个面的定位、颜色设置及变换方式。

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

 1 <!DOCTYPE html>
 2 <html>
 3 
 4     <head>
 5         <meta charset="UTF-8">
 6         <title></title>
 7         <style type="text/css">
 8             #div{
 9                 width: 900px;
10                 height: 900px;
11                 border: 0px solid green;
12             }
13             #box {
14                 width: 1000px;
15                 height: 1000px;
16                 border: 0px solid green;
17                 transform-style: preserve-3d;
18                 position: absolute;
19                 animation: spinCube 15s linear infinite alternate;
20             }
21             
22             
23             #box div {
24                 width: 200px;
25                 height: 200px;
26                 position: absolute;
27                 top: 600px;
28                 left: 600px;
29                 opacity: 0.7;
30                 color: white;
31                 text-align: center;
32                 font-size: 150px;
33                 font-weight: 600;
34             }
35             
36             @keyframes spinCube {
37                 0% {
38                     transform: rotateX( 0deg) rotateY( 0deg);
39                 }
40                 100% {
41                     transform:  rotateX( 90deg) rotateY( 360deg);
42                 }
43             }
44             /*参考面 正面*/
45             
46             .d1 {
47                 background: red;
48             }
49             /*底部*/
50             
51             .d2 {
52                 transform: rotateX(90deg);
53                 background: yellow;
54                 transform-origin: bottom;
55             }
56             /*顶部*/
57             
58             .d3 {
59                 transform: rotateX(90deg) translateY(-200px);
60                 background: green;
61                 transform-origin: top;
62             }
63             /*左边*/
64             
65             .d4 {
66                 transform: rotateY(90deg);
67                 background: blue;
68                 transform-origin: left;
69             }
70             /*右边*/
71             
72             .d5 {
73                 transform: rotateY(-90deg);
74                 background: black;
75                 transform-origin: right;
76             }
77             /*背面*/
78             
79             .d6 {
80                 transform: translateZ(-200px);
81                 background: gray;
82             }
83         </style>
84     </head>
85 
86     <body>
87         <div id="div">
88             <div id="box">
89                 <div class="d1">1</div>
90                 <div class="d2">2</div>
91                 <div class="d3">3</div>
92                 <div class="d4">4</div>
93                 <div class="d5">5</div>
94                 <div class="d6">6</div>
95             </div>
96         </div>
97     </body>
98 
99 </html>