CSS + HTMLの3D写真の壁を達成

<！DOCTYPE HTML > 
< HTML > 
    < ヘッド> 
        < メタのcharset = "UTF-8" > 
        < タイトル> 3dPhoto </ タイトル> 
< スタイルタイプ= "テキスト/ cssの" > 
        * { 
    マージン：0 ; 
    パディング：0 ; 
} 

体{ 
    背景：URL（../ IMG / wbg.png） 。
} 


■は{ 
    幅：320ピクセル。
    高さ：200pxの。
    位置：絶対; 
    トップ：0 ; 
    下：0 ; 
    左：0 ; 
    右：0 ; 
    マージン：自動; 
    トランスフォームスタイル：保存-3D 。
    アニメーション：無限の線形イム20S 。
} 

■はのIMG { 
    幅：100％ 。
    高さ：100％;
    位置：絶対; 
} 

@keyframes IM { 
    0％{ 
        変換：回転Y（値は0deg）回転X（10deg）を、
    } 

    25％{ 
        変換：回転Y（90deg）回転X（-10deg） 。
    } 

    50％{ 
        変換：回転Y（原稿180°）回転X（10deg）を、
    } 

    75％{ 
        変換：回転Y（270deg）回転X（-10deg） 。
    } 

    100％{ 
        変換：回転Y（360deg）回転X（10deg）; 
    } 

} 

/ * 10张图片3D变换* / 
■はIMG：n番目の子（1）{ 
    変換：回転Yを（値は0deg）translateZ（600PX） 。
    背面視認性：目に見えます。
} 

■はのIMG：n番目の子（2）{ 
    変換：回転Yを（36deg）translateZ（600PX） 。
    背面視認性：目に見えます。
} 

■はのIMG：n番目の子（3）{ 
    変換：回転Yを（72deg）translateZ（600PX） 。
    背面視認性：目に見えます。
}

■はのIMG：n番目の子（4）{ 
    変換：回転Y（108deg）translateZ（600PX）を、
    背面視認性：目に見えます。
} 

■はのIMG：n番目の子（5）{ 
    変換：回転Yを（144deg）translateZ（600PX） 。
    背面視認性：目に見えます。
} 

■はのIMG：n番目の子（6）{ 
    変換：回転Yを（原稿180°）translateZ（600PX） 。
    背面視認性：目に見えます。
} 

■はのIMG：n番目の子（7）{ 
    変換：回転Y（216deg）translateZ（600PX） 。
    背面視認性：目に見えます。
} 

■はのIMG：n番目の子（8）{ 
    変換：回転Yを（252deg）translateZ（600PX） 。
    背面視認性：目に見えます。
} 

■はのIMG：n番目の子（9）{ 
    変換：回転Yを（288deg）translateZ（600PX） 。
    背面視認性：目に見えます。
} 

■はのIMG：n番目の子（10）{ 
    変換：回転Yを（324deg）translateZ（600PX） 。
    背面視認性：目に見えます。
} 

        </ スタイル> 
    </ ヘッド> 
    < 身体> 
        < divのクラス= "ショー" > 
            < divのクラス= "ボックス" > 
                < IMG SRC = "./../../正面の.jpg"  > 
                < IMG SRC = "./../../反面.JPG"  > 
                < IMG SRC = "./../../ xuanjiezhimou.jpg"  > 
                < IMG SRC =」./../../码上说故事_ 690.jpeg」 > 
                < 
                IMG SRC = "./../../正面の.jpg"  > 
                < IMG SRC = "./../../反面.JPG"  > 
                < IMG SRC =」./../../ xuanjiezhimou。 JPG "  > 
                < IMG SRC =" ./../../码上说故事_690.jpeg "  > 
                < IMG SRC =" ./../../ 1.JPG」 > 
            </ DIV > 
        </ DIV > 
    </ ボディ> 
</ HTML >

コードの表示

 

----------------
免責事項：この記事は「寺」のオリジナルの記事、CC 4.0 BY-SAの著作権協定に従うが、再現CSDNのブロガーである、オリジナルのソースと、このリンクを添付してください声明。
オリジナルリンクします。https：//blog.csdn.net/qq_41866776/article/details/96695938