web CSS3 實現3D動態翻牌效果

時間 2020-06-25

標籤 web css3 css 實現 3d 動態翻牌效果欄目 HTML 简体版

原文原文鏈接

使用純CSS3 實現翻牌效果須要注意要給子盒子使用絕對定位，這樣兩個盒子能夠徹底重合在一塊兒，須要給父盒子一個html

transform-style: preserve-3d;讓子盒子翻轉時保持3D效果，

perspective: 400px;能夠給父盒子一個視距遵照近大遠小規則可根據須要設置。

transition: all 0.3s;使用延遲效果更好觀察動畫

當鼠標放上時就會旋轉動畫

如下代碼直接複製便可使用。spa

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 
 4 <head>
 5     <meta charset="UTF-8">
 6     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7     <title>Document</title>
 8     <style>
 9         .card {
10             position: relative;
11             transform-style: preserve-3d;
12             float: left;
13             perspective: 400px;
14             perspective: 180px;
15             width: 150px;
16             height: 150px;
17             margin: 100px 20px;
18             transition: all 0.3s;
19         }
20         
21         .card:hover {
22             transform: rotateY(-180deg);
23         }
24         
25         .cover,
26         .back {
27             position: absolute;
28             width: 100%;
29             height: 100%;
30             border-radius: 50%;
31             font-size: 25px;
32             text-align: center;
33             line-height: 150px;
34         }
35         
36         .cover {
37             background-color: purple;
38             transform: rotateY(180deg);
39         }
40         
41         .back {
42             z-index: 1;
43             background-color: pink;
44         }
45     </style>
46 </head>
47 
48 <body>
49     <div class="card">
50         <div class="cover">1號正面</div>
51         <div class="back">1號反面</div>
52     </div>
53     <div class="card">
54         <div class="cover">2號正面</div>
55         <div class="back">2號反面</div>
56     </div>
57     <div class="card">
58         <div class="cover">3號正面</div>
59         <div class="back">3號反面</div>
60     </div>
61     <div class="card">
62         <div class="cover">4號正面</div>
63         <div class="back">4號反面</div>
64     </div>
65 </body>
66 
67 </html>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。