美女视频wz,美女视频黄频大全视

web CSS3 實現(xiàn)3D動態(tài)翻牌效果

精品唯居 >《待分類》

2021.10.10

關(guān)注

使用純CSS3 實現(xiàn)翻牌效果需要注意要給子盒子使用絕對定位，這樣兩個盒子可以完全重合在一起，需要給父盒子一個

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

perspective: 400px;可以給父盒子一個視距遵守近大遠(yuǎn)小規(guī)則可根據(jù)需要設(shè)置。

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

當(dāng)鼠標(biāo)放上時就會旋轉(zhuǎn)

以下代碼直接復(fù)制即可使用。

 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>

本站僅提供存儲服務(wù)，所有內(nèi)容均由用戶發(fā)布，如發(fā)現(xiàn)有害或侵權(quán)內(nèi)容，請點擊舉報。

打開APP，閱讀全文并永久保存查看更多類似文章

如何使用純 CSS 創(chuàng)建翻牌動畫

CSS3實現(xiàn)0.5px的邊框

三種純CSS實現(xiàn)三角形的方法 | Hey@feelcss

CSS3實現(xiàn)圓環(huán)進(jìn)度條

css3 繪制蘋果圖標(biāo)

利用CSS3特性巧妙實現(xiàn)漂亮的DIV箭頭

更多類似文章 >>

中文字幕理论片,69视频免费在线观看,亚洲成人app,国产1级毛片,刘涛最大尺度戏视频,欧美亚洲美女视频,2021韩国美女仙女屋vip视频