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

html代码：6张扑克牌

 <div class="pkBox">
     <img src="../img/pk1.jpg" alt="">
     <img src="../img/pk2.jpg" alt="">
     <img src="../img/pk3.jpg" alt="">
     <img src="../img/pk4.jpg" alt="">
     <img src="../img/pk5.jpg" alt="">
     <img src="../img/puke.jpg" alt="">
 </div>

css代码

     <style>
         .pkBox{
             width: 250px;
             height: 344px;
             position: relative;
             margin: 300px auto;
         }
         .pkBox > img{
             width: 100%;
             height: 100%;
             position: absolute;
             left:;
             top:;
             transition: transform 1s;
             transform-origin: right top;
         }
         .pkBox:hover >img:nth-of-type(1){
             transform: rotate(60deg);
         }
         .pkBox:hover >img:nth-of-type(2){
             transform: rotate(120deg);
         }
         .pkBox:hover >img:nth-of-type(3){
             transform: rotate(180deg);
         }
         .pkBox:hover >img:nth-of-type(4){
             transform: rotate(240deg);
         }
         .pkBox:hover >img:nth-of-type(5){
             transform: rotate(300deg);
         }
         .pkBox:hover >img:nth-of-type(6){
             transform: rotate(360deg);
         }

     </style>