css 3D堆叠图片卡 

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title></title>
 6     <style>
 7         *{
 8             margin: 0;
 9             padding: 0;
10         }
11         body{
12             background-color: black;
13             perspective: 800px;
14         }
15         .box{
16             width: 155px;
17             height: 360px;
18             margin: 100px auto;
19            /* background-color: green;*/
20             position: relative;
21         }
22         .box ul{
23             background-color: yellow;
24             list-style: none;
25             transform-style: preserve-3d;
26         }
27         .box ul li{
28             background-color: pink;
29             width: 155px;
30             height: 360px;
31             position: absolute;
32             left: 0;
33             top: 0;
34             transform-origin: bottom;
35             border-radius: 20px;
36             box-shadow: 0px 0px 20px 0px #000;
37             transition:1s;
38         }
39          .box ul li:nth-child(1){
40             transform: translateZ(0px) rotate(-45deg);
41 
42          }
43          .box ul li:nth-child(1):hover{
44             transform: translateZ(100px) rotate(-45deg);
45          }
46             
47          .box ul li:nth-child(2){
48             transform: translateZ(10px) rotate(-22.5deg);
49          }
50          .box ul li:nth-child(2):hover{
51             transform: translateZ(100px) rotate(-22.5deg);
52          }
53          .box ul li:nth-child(3){
54             transform: translateZ(20px);
55          }
56          .box ul li:nth-child(3):hover{
57             transform: translateZ(100px);
58          }
59           .box ul li:nth-child(4){
60             transform: translateZ(10px) rotate(22.5deg);
61          }
62          .box ul li:nth-child(4):hover{
63             transform: translateZ(100px) rotate(22.5deg);
64          }
65           .box ul li:nth-child(5){
66             transform: translateZ(0px) rotate(45deg);
67          }
68          .box ul li:nth-child(5):hover{
69             transform: translateZ(100px) rotate(45deg);
70          }
71     </style>
72     <script src='jquery.js'></script>
73 </head>
74 <body>
75     
76     <div class="box">
77         <ul>
78             <li></li>
79             <li></li>
80             <li></li>
81             <li></li>
82             <li></li>
83         </ul>
84     </div>
85 
86 
87 </body>
88 </html>

 

posted @ 2018-03-17 21:42  筱白迩  阅读(353)  评论(0)    收藏  举报