h5-transform二维变换-盾牌还原案例
就是8张盾牌的拼图
1 <div class="transforms"> 2 <img src="../img/dp1.png" alt=""> 3 <img src="../img/dp2.png" alt=""> 4 <img src="../img/dp3.png" alt=""> 5 <img src="../img/dp4.png" alt=""> 6 <img src="../img/dp5.png" alt=""> 7 <img src="../img/dp6.png" alt=""> 8 <img src="../img/dp7.png" alt=""> 9 <img src="../img/dp8.png" alt=""> 10 </div>
css代码：
1 <style> 2 body{ 3 background-color: #3aff86; 4 } 5 6 .transforms{ 7 width: 404px; 8 height: 512px; 9 position: relative; 10 margin: 100px auto; 11 } 12 .transforms>img{ 13 width: 100%; 14 height: 100%; 15 position: absolute; 16 top: 0; 17 left: 0; 18 transition: transform 1s; 19 } 20 .transforms > img:nth-of-type(1){ 21 transform: translate(30px,-30px) rotate(30deg); 22 } 23 .transforms > img:nth-of-type(2){ 24 transform: translate(-30px,30px) rotate(-30deg); 25 } 26 .transforms > img:nth-of-type(3){ 27 transform: translate(90px,-90px) rotate(90deg); 28 } 29 .transforms > img:nth-of-type(4){ 30 transform: translate(-90px,90px) rotate(-90deg); 31 } 32 .transforms > img:nth-of-type(5){ 33 transform: translate(-200px,230px) rotate(230deg); 34 } 35 .transforms > img:nth-of-type(6){ 36 transform: translate(-130px,130px) rotate(-130deg); 37 } 38 .transforms > img:nth-of-type(7){ 39 transform: translate(220px,-220px) rotate(220deg); 40 } 41 .transforms > img:nth-of-type(8){ 42 transform: translate(220px,-220px) rotate(30deg); 43 } 44 .transforms:hover > img{ 45 transform: none; 46 } 47 </style>
