第102天:CSS3实现立方体旋转

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>

运行效果:

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

扫码关注云+社区

领取腾讯云代金券