シールド削減ケース - 二次元変換をH5-変換

就是8张盾牌的拼图
1  < DIV クラス= "変換" > 
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      <スタイル>
 2          本体 {
 3              背景色：＃3aff86。
4          }
 5  
6          .transforms {
 7              幅：404px ;
8              高さ：512px ;
9              位置：相対。
10              マージン：100pxに自動 ;
11          }
 12          .transforms> IMG {
 13              幅：100％ ;
14              高さ：100％ 。
15              位置：絶対。
16              トップ：0 ;
17は             左：0 ;
18              遷移：1S変換。
19          }
 20          .transforms> IMG：n番目の型（1） {
 21               変換：変換（30px、-30px）回転（30度）。
22           }
 23         .transforms> IMG：n番目の型（2） {
 24              変換：（-30px、30px）が回転（-30deg）翻訳。
25          }
 26          .transforms> IMG：n番目の型（3） {
 27              変換：変換（90PX、-90px）回転（90deg） 。
28          }
 29          .transforms> IMG：n番目の型（4） {
 30              変換：（-90px、90PX）が回転（-90deg）翻訳。
31          }
 32          .transforms> IMG：n番目の型（5） {
 33             変換：（-200px、230px）回転（230deg）を変換。
34          }
 35          .transforms> IMG：n番目の型（6） {
 36              変換：（-130px、130px）が回転（-130deg）翻訳。
37          }
 38          .transforms> IMG：n番目の型（7） {
 39              変換：変換（220pxを-220px）（220deg）を回転させます。
40          }
 41          .transforms> IMG：n番目の型（8） {
 42              変換：変換（220px、-220px）回転（30度）;
43          }
 44          .transforms：ホバー> IMG {
 45が             変換：なしに、
46          }
 47      </スタイル>