h5-transform二维变换-盾牌还原案例

就是8张盾牌的拼图 
1 <div class="transforms">
     <img src="../img/dp1.png" alt="">
     <img src="../img/dp2.png" alt="">
     <img src="../img/dp3.png" alt="">
     <img src="../img/dp4.png" alt="">
     <img src="../img/dp5.png" alt="">
     <img src="../img/dp6.png" alt="">
     <img src="../img/dp7.png" alt="">
     <img src="../img/dp8.png" alt="">
 </div>

css代码：

     <style>
         body{
             background-color: #3aff86;
         }

         .transforms{
             width: 404px;
             height: 512px;
             position: relative;
             margin: 100px auto;
         }
         .transforms>img{
             width: 100%;
             height: 100%;
             position: absolute;
             top:;
             left:;
             transition: transform 1s;
         }
         .transforms > img:nth-of-type(1){
              transform: translate(30px,-30px) rotate(30deg);
          }
         .transforms > img:nth-of-type(2){
             transform: translate(-30px,30px) rotate(-30deg);
         }
         .transforms > img:nth-of-type(3){
             transform: translate(90px,-90px) rotate(90deg);
         }
         .transforms > img:nth-of-type(4){
             transform: translate(-90px,90px) rotate(-90deg);
         }
         .transforms > img:nth-of-type(5){
             transform: translate(-200px,230px) rotate(230deg);
         }
         .transforms > img:nth-of-type(6){
             transform: translate(-130px,130px) rotate(-130deg);
         }
         .transforms > img:nth-of-type(7){
             transform: translate(220px,-220px) rotate(220deg);
         }
         .transforms > img:nth-of-type(8){
             transform: translate(220px,-220px) rotate(30deg);
         }
         .transforms:hover > img{
             transform: none;
         }
     </style>