3次元画像配置効果を実現する純粋なCSSのサンプルコード

1. 要素の幅/高さ/パディング/マージンのパーセンテージ基準

要素の幅/高さ/パディング/マージンのパーセンテージを設定するときのベンチマークが何かをご存知ですか?

例えば：

。親 {
  幅: 200ピクセル;
  高さ: 100px;
}
。子供 {
  幅: 80%;
  高さ: 80%;
}
.childchild {
  幅: 50%;
  高さ: 50%;<br> パディング: 2%;<br> マージン: 5%;<br>
}  

<div class="parent">
    <div class="child">
        <div class="childchild"></div>
    </div>
</div>

上記のコードでは、childchild 要素の幅はどれくらいでしょうか?高さとは何ですか？パディングとは何ですか?マージンとは何ですか?

要素の高さのパーセンテージ基準は親要素の高さであり、要素の幅、パディング、およびマージンのパーセンテージ基準は親要素の幅です。

これで皆さんももうお分かりだと思います。ぜひ試してみてくださいね〜

面接では、アダプティブスクエアを実装するという簡単な CSS スタイルの質問によく遭遇します。原理は上記の知識に基づいています。ただ必要なだけ

＃箱 {
            幅: 50%;
            パディング上部: 50%;
            背景: #000;
        }

要素の幅とパディングの基本値は両方とも親要素の幅であり、本体の幅はブラウザウィンドウであるため、この設定により、ブラウザウィンドウのサイズが変わっても正方形が適応するようになります。

2. 純粋なCSSを使用して3次元画像配置効果を実現します。

さて、本題に戻りますが、次の図に示す画像の 3 次元配置効果を実現するには、パディング、幅、高さの知識を適用する必要があります。

ちょっと見覚えがありますね。小説ソフトのおすすめ本のスタイルに似ているのでしょうか？

ここでは、まずその配置を見てみましょう。1枚の絵は水平中央で正面に配置され、他の2枚の絵は左右に少し後ろに並んでおり、立体的な配置になっています。ここでは、CSS だけに頼ってこの 3 次元効果を実現する方法を学びました。

さまざまな高さは、さまざまなサイズの padding-top によってサポートされます。

· 前後の効果は、Z インデックスの折りたたみ順序によって制御されます。

配置は、n 番目のタイプの疑似要素 + 位置によって制御されます。

何か考えはありますか？遠回しにせず、すぐにコードを見てみましょう。

<html>
    <ヘッド>
        <スタイル>
            * {
                マージン: 0;
                パディング: 0;
            }
            。箱 {
                幅: 300ピクセル;
                高さ: 200px;
                位置: 相対的;
            }
            .img {
                幅: 自動;
                高さ: 0;
            }
            .box 画像 {
                幅: 100%;
                表示: インラインブロック;
            }
            .box .img:n番目のタイプ(1) {
                表示: インラインブロック;
                位置: 絶対;
                左: 50%;
                上位: 50%;
                パディング下部: 50%;
                変換: translate(-50%, -50%);
                zインデックス: 6;
            }
            .box .img:n番目の型(2), .box .img:n番目の型(3) {
                位置: 絶対;
                上位: 50%;
                変換: translateY(-50%);
                パディング下部: 63%;
                zインデックス: 3;
            }
            .box .img:n番目のタイプ(2) {
                右: 0;
            }
            .box .img:n番目のタイプ(3) {
                左: 0;
            }
        </スタイル>
    </head>
    <本文>
        <div class="box">
            <div class="img">
                <img src="https://febaidu.com/list/img/3ns.png" />
            </div>
            <div class="img">
                <img src="https://febaidu.com/list/img/3ns.png" />
            </div>
            <div class="img">
                <img src="https://febaidu.com/list/img/3ns.png" />
            </div>
        </div>
    </本文>
</html>

要約する

上記は、エディターが3次元画像配置効果を実現するために導入した純粋なCSS方式です。皆様のお役に立てれば幸いです。ご質問がございましたら、メッセージを残してください。エディターがすぐに返信いたします。また、123WORDPRESS.COM ウェブサイトをサポートしてくださっている皆様にも感謝申し上げます。

<<: JS の querySelector メソッドと getElementById メソッドの違い

>>: Kylin V10 サーバーで Storm をコンパイルしてインストールする詳細なプロセス