CSS3は、3Dコンバージョンを達成します

結果を実現：

上の写真の上にマウスホバーは、絵を覆した場合、それをコピーし、それがマウスを再開キャンセル

実装コード：

<！DOCTYPE HTML > 
< HTML LANG = "EN" > 
< 頭> 
    < メタ文字コード= "UTF-8" > 
    < タイトル> 3D变换</ タイトル> 
    < スタイル> 
        * { 
            マージン：0 ; 
            パディング：0 ; 
        } 
        体{ 
            背景色：＃0d3462 。
        } 
        #piclist { 
            幅：760px ; 
            高さ：220px ; 
            マージン：100pxに自動; 

        } 
        .picbox { 
            フロート：左; 
            幅：170px ; 
            高さ：190px ; 
            マージン：10pxの; 
            位置：相対; 
            -webkit-変換スタイルを：保存-3D 。
             -moz-変換スタイルを：保存-3D 。
             -ms-変換スタイル：保存-3D 。
             トランスフォームスタイル：保存-3D 。
             トランジション：1.5秒。 
        } 
        .picbox：ホバー{ 
            変換：回転Y（原稿180°） 。 
        } 
        .face { 
            幅：170px ; 
            高さ：190px ; 
            位置：絶対; 
        } 
        .front { 
            ボーダー：2ピクセル固体＃1 4b2518; 
        } 
        .back { 
           -webkit-変換：回転Y（原稿180°） 。
            -ms-変換：回転Y（原稿180°） 。
            -o-変換：回転Y（原稿180°） 。
            変換：回転Y（原稿180°） 。
            / * 背景色：＃4b2518。* / 
            ボーダー：2ピクセル固体#FFF ; 
            
        } 
        .back H3 { 

            色：白。
            テキスト整列：センター; 
        } 
    </スタイル> 
</ ヘッド> 
< 身体> 
    < div要素のid = "piclist" > 
        < divのクラス= "picbox" > 
            < divのクラス= "顔フロント" > < IMG SRC = "画像/ 1.JPG" ALT = "" > </ DIV > 
            < DIV クラス= "顔バック" > 
                < H3 >浓缩咖啡</ H3 > 
            </ DIV > 
            
        </ DIV > 

        < DIV クラス= "picbox" > 
            < DIV クラス= "顔正面" > < IMG SRC = "画像/ 2.JPG" ALT = "" > </ DIV > 
            < DIV クラス= "顔バック" > 
                < H3 >浓缩咖啡</ H3 > 
            </ DIV > 
            
        </ DIV > 

        < DIV クラス= "picbox" > 
            < divのクラス= "顔フロント" > < IMG SRC =」画像/ 3.JPG」 ALT = "" > </ divの> 
            < DIV クラス= "顔バック" > 
                < H3 >浓缩咖啡</ H3 > 
            </ DIV > 
            
        </ DIV > 
        < DIV クラス= "picbox" > 
            < DIV クラス= "顔正面" > < IMG SRC = "画像/4.jpg」ALT = "" > </ divの> 
            < divのクラス= "顔バック" > 
                < H3 >浓缩咖啡</ H3 > 
            </ DIV >
            
        </ DIV > 

    </ DIV > 
    
</ ボディ> 
</ HTML >