小さなポーカーケース - 二次元変換をH5-変換

htmlコード：6枚のトランプ

1  < DIV クラス= "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      <スタイル>
 2          .pkBox {
 3              幅：250ピクセル。
4              高さ：344px ;
5              位置：相対。
6              マージン：300ピクセルのオート ;
7          }
 8          .pkBox> IMG {
 9              幅：100％ 。
10              高さ：100％ 。
11              位置：絶対;
図12は、             左：0。
13              上部：0。
14              トランジション：1秒を変換します。
15              変換-起源：右上 ;
16          }
 17          .pkBox：ホバー> IMG：n番目の型（1） {
 18が             変換：回転（60deg） 。
19          }
 20          .pkBox：ホバー> IMG：n番目の型（2） {
 21が             変換：回転（120deg） 。
22          }
 23          .pkBox：ホバー> IMG：n番目の型（3） {
 24が             変換：回転（原稿180°） 。
25          }
 26          .pkBox：ホバー> IMG：n番目の型（4） {
 27が             変換：回転（240deg） 。
28          }
 29          .pkBox：ホバー> IMG：n番目の型（5） {
 30が             変換：回転（300deg） 。
31          }
 32          .pkBox：ホバー> IMG：n番目の型（6） {
 33              変換：回転（360deg） 。
34          }
 35  
36      </スタイル>