CSS3实现立方体旋转
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>立方体旋转</title>
6 <style>
7 .box{
8 width: 250px;
9 height: 250px;
10 border: 1px dashed red;
11 margin:100px auto;
12 position: relative;
13 transform-style: preserve-3d;
14 border-radius: 50%;
15 /*transform: rotateX(30deg) rotateY(-30deg);*/
16
17 animation: gun 8s linear infinite;
18 }
19 .box>div{
20 width: 100%;
21 height: 100%;
22 position: absolute;
23 text-align: center;
24 line-height: 250px;
25 font-size: 60px;
26 color: green;
27 }
28 .left{
29 background-color: rgba(255,0,0,0.3);
30 /*变换中心*/
31 transform-origin: left;
32 /*变换*/
33 transform:rotateY(90deg) translateX(-125px);
34 }
35 .right{
36 background-color: rgba(0,0,255,0.3);
37 transform-origin: right;
38 transform: rotateY(90deg) translateX(125px);
39 }
40 .forward{
41 background-color: rgba(0,255,255,0.3);
42 transform: translateZ(125px);
43 }
44 .back{
45 background-color: rgba(255,255,0,0.3);
46 transform: translateZ(-125px);
47 }
48 .up{
49 background-color: rgba(99,66,33,0.3);
50 transform: rotateX(90deg) translateZ(125px);
51 }
52 .down{
53 background-color: rgba(255,0,255,0.3);
54 transform: rotateX(-90deg) translateZ(125px);
55 }
56 @keyframes gun {
57 0%{
58 transform: rotateX(0deg) rotateY(0deg);
59 }
60 100%{
61 transform: rotateX(360deg) rotateY(360deg);
62 }
63 }
64 </style>
65 </head>
66 <body>
67 <div class="box">
68 <div class="up">上</div>
69 <div class="down">下</div>
70 <div class="left">左</div>
71 <div class="right">右</div>
72 <div class="forward">前</div>
73 <div class="back">后</div>
74 </div>
75 </body>
76 </html>
运行效果：
时间： 2024-09-29 00:54:02