CSS 3 旋转的魔方

html

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <meta charset="utf-8">
 5     <title></title>
 6     <style>
 7     </style>
 8     <link rel="stylesheet" type="text/css" href="style.css">
 9 </head>
10 <body>
11     <div class="container">
12         <div class="box">
13             <div class="kuang"></div>
14             <div class="kuang"></div>
15             <div class="kuang"></div>
16             <div class="front"><img src="img/1.jpg" class="pic"></div>
17             <div class="back"><img src="img/2.jpg" class="pic"></div>
18             <div class="top"><img src="img/3.jpg" class="pic"></div>
19             <div class="bottom"><img src="img/4.jpg" class="pic"></div>
20             <div class="left"><img src="img/5.jpg" class="pic"></div>
21             <div class="right"><img src="img/6.jpg" class="pic"></div>
22         </div>
23     </div>
24 </body>
25 </html>
HTML

css

 1 body{
 2     background-color: aquamarine;
 3 }
 4 .container{
 5     margin: 200px auto;
 6     position: relative;
 7     
 8 }
 9 .box{
10     width: 100px;
11     height: 100px;
12     margin: 0 auto;
13     transform-style: preserve-3d;
14     transform: rotateX(-31deg) rotateY(-20deg);
15     animation-name: xuan;
16     animation-timing-function: linear;
17     animation-duration: 3s;
18     animation-iteration-count: infinite;
19 }
20 .box div{
21     position: absolute;
22     width: 100px;
23     height: 100px;
24     opacity: 0.85;
25 }
26 .pic{width: 100%;height: 100%;}
27 .front{transform: rotateY(0deg) translateZ(50px);}
28 .back{transform: rotateY(0deg) translateZ(-50px);}
29 .left{transform: rotateY(90deg) translateZ(50px);}
30 .right{transform: rotateY(-90deg) translateZ(50px);}
31 .top{transform: rotateX(90deg) translateZ(50px);}
32 .bottom{transform: rotateX(-90deg) translateZ(50px);}
33 .kuang{
34     padding:50px;
35     left: -50px;
36     top: -50px;
37     border: 5px solid greenyellow;
38     border-radius: 50%;
39 }
40 .box:hover .kuang{
41     padding: 100px;
42     left: -100px;
43     top: -100px;
44 }
45 .box:hover{animation-play-state: paused;}
46 .box:hover .front{transform: rotateY(0deg) translateZ(100px);}
47 .box:hover .back{transform: rotateY(0deg) translateZ(-100px);}
48 .box:hover .left{transform: rotateY(90deg) translateZ(100px);}
49 .box:hover .right{transform: rotateY(-90deg) translateZ(100px);}
50 .box:hover .top{transform: rotateX(90deg) translateZ(100px);}
51 .box:hover .bottom{transform: rotateX(-90deg) translateZ(100px);}
52 .box div:first-child{transform: rotateY(90deg);}
53 .box div:nth-child(2){transform: rotateX(90deg);}
54 @keyframes xuan{
55     0%{transform: rotateX(0) rotateY(0);}
56     100%{transform: rotateX(360deg) rotateY(360deg);}
57 }
CSS
大概的思路是：
设置三维立体视角
transform-style: preserve-3d;
 
然后每一张图片都给出不同的位置
.front{transform: rotateY(0deg) translateZ(50px);}
 
开启动画效果如图形旋转起来
@keyframes xuan{
0%{transform: rotateX(0) rotateY(0);}
100%{transform: rotateX(360deg) rotateY(360deg);}
}
 
posted @ 2018-01-13 23:05  期待明天**  阅读(132)  评论(0)    收藏  举报