CSS を使用して、画像に 3D の凸型と凹型のエフェクト (フレーム外に凸型、またはフレーム内に凹型) を実現します。

Ⅰ. 問題の説明:

CSS を使用して画像の 3D 凸凹効果を実現します。

Ⅱ実施手順は以下のとおりです。

1. 表示結果は次のとおりです。
A. 正常画像（画像1と画像2は両方とも正常です）:

ここに画像の説明を挿入

B. 画像 1 はフレームからはみ出していますが、画像 2 は正常です。
トリガープロセス: 図 1 の赤枠内にマウスを置くと、結果が表示されます。

ここに画像の説明を挿入

C. 写真 1 は正常ですが、写真 2 はフレーム内に沈んでいます。
トリガープロセス: 図 2 の赤枠内にマウスを置くと、結果が表示されます。

ここに画像の説明を挿入

2. VScodeソフトウェアを実行し、個人テストで実現できます。

3.コードを実行します。

<!DOCTYPE html>
<html>
<head lang="ja">
    <メタ文字セット="UTF-8">
    <タイトル></タイトル>
    <スタイル>
        。包む {
            フロート: 左;
            幅: 200ピクセル;
            高さ: 300px;
            境界線: 1px 実線の赤;
            マージン: 100px 0 0 100px;
            パースペクティブ:500px;
            /* 
            「perspective:500px;」は、遠近法の距離（遠くの小さなもの、近くにある大きなものの効果）を意味します。
            しかし、変わったのは感覚だけで、実際のサイズは変わっていません。
             */
        }

        .wrap画像{
            遷移: 0.5秒;
        }

        .wrap:nth-child(1):ホバー画像{
            変換: translateZ(100px);
            /* "translateZ(100px);" は、Z 軸の正の方向に 100px 移動することを意味します (画面の外側に対して垂直が正です); */
        }

        .wrap:nth-child(2):ホバー画像{
            変換: translateZ(-100px);
            /* "translateZ(-100px);" は、Z 軸の負の方向 (画面の垂直方向の内側に負) に 100px 移動することを意味します。*/
        }
      
    </スタイル>
</head>
<本文>

<div class="wrap">
    <画像 src="pic02.jpg"/>
</div>
<!-- 
    このとき、img の src アドレスは、読み込んだ画像のアドレスを参照します。画像のアドレスとコード ドキュメントが同じディレクトリにある場合、上記のコードのようにアドレスを簡単に導入できます。
 -->
<div class="wrap">
    <画像 src="pic02.jpg"/>
</div>

</本文>
</html>

III. 結論

CSS を使用して画像に 3D の凸凹効果 (フレーム外に突き出したり、フレーム内に沈んだりする効果) を実現する方法についての記事はこれで終わりです。CSS を使用して 3D の凸凹効果を実現する方法に関するより関連性の高いコンテンツについては、123WORDPRESS.COM の以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

<<: LinuxとGNUシステムの関係の詳細な説明

>>: モバイル端末の適応に関する簡単な説明