h5-transform二维变换-扑克牌小案例

html代码：6张扑克牌

1 <div class="pkBox">
2     <img src="../img/pk1.jpg" alt="">
3     <img src="../img/pk2.jpg" alt="">
4     <img src="../img/pk3.jpg" alt="">
5     <img src="../img/pk4.jpg" alt="">
6     <img src="../img/pk5.jpg" alt="">
7     <img src="../img/puke.jpg" alt="">
8 </div>

css代码

 1     <style>
 2         .pkBox{
 3             width: 250px;
 4             height: 344px;
 5             position: relative;
 6             margin: 300px auto;
 7         }
 8         .pkBox > img{
 9             width: 100%;
10             height: 100%;
11             position: absolute;
12             left: 0;
13             top: 0;
14             transition: transform 1s;
15             transform-origin: right top;
16         }
17         .pkBox:hover >img:nth-of-type(1){
18             transform: rotate(60deg);
19         }
20         .pkBox:hover >img:nth-of-type(2){
21             transform: rotate(120deg);
22         }
23         .pkBox:hover >img:nth-of-type(3){
24             transform: rotate(180deg);
25         }
26         .pkBox:hover >img:nth-of-type(4){
27             transform: rotate(240deg);
28         }
29         .pkBox:hover >img:nth-of-type(5){
30             transform: rotate(300deg);
31         }
32         .pkBox:hover >img:nth-of-type(6){
33             transform: rotate(360deg);
34         }
35 
36     </style>

 

posted @ 2019-08-21 18:34  FengBrother  阅读(368)  评论(0)  编辑  收藏  举报