74-無限スクロールウィンドウのHTMLシリアル生産、3D変換モジュール

まず、デザイン、無限スクロールページ

そこのコメントは、多くの知識を学習する前に検討されているが、また、いくつかのあいまいな場所なのかもしれません。

    < スタイル> 

        * { 

            パディング：0 ; 

            マージン：0 ; 

        } 

        div要素{ 

            幅：600PX ; 

            高さ：188px ; 

            Boder ：1pxのソリッドブラック; 

            マージン：100pxに自動; 

            オーバーフロー：隠された; / * ここに見直さオーバーフロー：使用に隠されました、それはこのdiv要素のうちの何かを表し国境は見えませんでした* / } 
        ULを{


        


            幅：2000px ; 

            高さ：188px ; 

            背景色：黒; 

            アニメーション：リニア5S無限に移動; / * アニメーション速度の名前は、遅延時間サイクルサイクルパターンの持続時間の関数である* / 

        } 

        @keyframes移動{ 

            {から

                マージン左：0 。

            } 

            に{ 

                のmargin-left ：-1200px ; / * この数字は非常に重要であり、我々はその後、無制限の写真のチェーンを見たいです* / 

                / *李はさらにいくつかの要素、それがアップシームレスに移動できることを持っている上記* / 

            } 

        } 

        ULのリチウム{ 

            リストスタイル：なしに、

            幅：300ピクセルによって; 

            高さ：188px ; 

            背景色：赤; 

            ボーダー：1ピクセルソリッド黒、

            ボックス、サイジング：ボーダーボックス; 

            フロート：左; 

        } 

        イメージ{ 

            幅：100％ 。

            高さ：100％; } 
        UL：ホバー{ 
            アニメーションプレイステート：一時停止; / * マウスタッチ画像一度見直し、属性停止* / } 
        UL：リチウムホバー{ / * 選択されていないピクチャをノートマスクは、これは黒の五十%背景色を達成するために、ULタグのインプレッションの割合である、マスクを追加* / 
            不透明度：0.5 ; } 
        ULのLi：ホバー{ 
            不透明：1 ; / * この私たちは、選択した画像がマスキング効果を生成しませんしたいので、優先順位は、第2の指定プロパティの具体的なデモがあるので、まず、高くなる、となります* / } 
............コード..........省い
の<div>を


        



        


            


        



        



    <UL> 

        <LI> <IMG SRC = "画像/ laptop.jpg" ALT = ""> </ LI> 

        <LI> <IMG SRC = "画像/ play_tennis2.jpg" ALT = ""> </ LI> 

        < LI> <IMG SRC = "画像/ example1.jpg" ALT = ""> </ LI> 

        <LI> <IMG SRC = "画像/ line_left.jpg" ALT = ""> </ LI> 

        <LI> <IMG SRC = "画像/ laptop.jpg" ALT = ""> </ LI> 

        <LI> <IMG SRC = "画像/ play_tennis2.jpg" ALT = ""> </ LI> 

    </ UL> 

</ div>

二、3D変換モジュール

1.どのような2Dおよび3Dの？

図2Dは、厚させず、唯一の幅と高さの平坦であり、3Dは幅と高さ、並びに厚さの、斜視図であり、すべての要素は、デフォルトでは、2D表示から外れています。

2.どの要素がレンダリングされた3Dフォームを作るには？

そして、視点（perpective）、のような、ただそれを変換し、スタイルにプロパティを親要素を与え、要素の3D効果を見たい、そして設定

 

トランスフォームスタイル：persever-3D。

 

    < スタイル> 

        * { 

            パディング：0 ; 

            マージン：0 ; 

        } 

        .father { 

            幅：200pxの。

            高さ：200pxの。

            背景色：赤。

            国境：1pxの黒一色。

            マージン：100自動; 

            perpective ：500pxなど。/ * 透视效果* /

            変換：回転Y（80deg）; 

            変換スタイルを：保存-3Dを; / * すべてのサブ要素の3D要素に* / 

        } 

        .son { 

            幅：100ピクセル、

            高さ：100pxに、

            背景色：黄色; 

            ボーダー：1ピクセル黒一色; 

            マージン：0自動; 

            マージントップ：は50px ; 

            変換：回転Y（45deg） 。

        } 

.........省略代码....... 

<DIV CLASS = "父"> 

    <DIV CLASS = "息子"> </ div> 

</ div>

第三に、ソースコード：

D180_1_RollingInfinitely.html

D181_3DTransformModule.html

住所：

https://github.com/ruigege66/HTML_learning/blob/master/D180_1_RollingInfinitely.html

https://github.com/ruigege66/HTML_learning/blob/master/D181_3DTransformModule.html

2.CSDNます。https：//blog.csdn.net/weixin_44630050

3.パークブログます。https：//www.cnblogs.com/ruigege0000/

4.歓迎マイクロチャンネル公衆数に焦点を当て：フーリエだけ技術交流のために、個人アカウントを変換し、舞台裏の返信「贈り物」ビッグデータ集録Javaの学習ビデオのパッケージ

74-無限スクロールウィンドウのHTMLシリアル生産、3D変換モジュール

おすすめ