码迷,mamicode.com
首页 > Web开发 > 详细

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

时间:2017-12-03 00:36:57      阅读:201      评论:0      收藏:0      [点我收藏+]

标签:div   position   中心   ati   for   mat   idt   forward   图片   

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>

运行效果:
技术分享图片

 

 

 

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

标签:div   position   中心   ati   for   mat   idt   forward   图片   

原文地址:http://www.cnblogs.com/le220/p/7956453.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!