CSS で 3D ブック効果を実装するためのサンプルコード

さっそく、レンダリングを見てみましょう

ここに画像の説明を挿入

ソースコードは以下のとおりです

<!DOCTYPE html>
<html lang="ja">
<ヘッド>
    <メタ文字セット="UTF-8">
    <meta name="viewport" content="width=デバイス幅、初期スケール=1.0">
    <title>ドキュメント</title>
</head>
<スタイル>
    *{
        マージン: 0;
        パディング: 0;
    }
    体{
        ディスプレイ: フレックス;
        アイテムの位置を中央揃えにします。
        コンテンツの中央揃え: 中央;
        幅: 100%;
        最小高さ: 100vh;
        背景: #333333;
        背景サイズ: カバー;
    }
    。本{
        幅: 400ピクセル;
        高さ: 600px;
        位置: 相対的;
        背景色: #ffffff;
        変換: 回転(-37.5度) skewX(10度);
        ボックスの影: -35px 35px 50px rgb(0,0, 0, 1);
        遷移: 0.5秒;
        /* カーソルはリンクを示すポインタ（手）としてレンダリングされます */
        カーソル: ポインタ;
    }
    .book:hover{
        /* rotate パラメータで角度を指定して 2D 回転を定義します。 */
        /* skewX() は、X 軸に沿った 2D 傾斜変換を定義します。
            translate(x,y) は 2D 変換を定義します。
          */
        変換: 回転(-37.5度) 傾斜X(10度) 移動(20px,-20px);
        /* box-shadow はボックスに 1 つ以上の影を追加します */
        ボックスの影: -50px 50px 100px rgba(0,0,0,1);
    }
    /* 疑似要素はコンテンツとともに使用され、少なくとも空である必要があります*/
    .book::before{
        コンテンツ：'';
        高さ:100%;
        幅:30px;
        背景: 赤;
        位置: 絶対;
        上: 0;
        左: 0;
        変換: skewY(-45deg) translate(-30px,-15px); 
        ボックスの影: インセット -10px 0 20px raba(0,0,0,0,2);
        背景: url(cofe.jpg);
    }
    .book::after{
            コンテンツ： '';
            高さ: 30px;
            幅: 100%;
            背景: #fff;
            位置: 絶対;
            下部: 0;
            左: 0;
            変換: skewX(-45deg) translate(15px,30px);
            背景: url(cofe.jpg);

    }
    .book h2{
        位置: 絶対;
        下: 100px;
        左: 10px;
        フォントサイズ: 5em;
        行の高さ: 1em;
        色: rgb(110, 21, 21);
    }
    .book h2 span{
        背景画像: url(cofe.jpg);
        背景添付: 固定;
        -webkit-background-clip: テキスト;
        -webkit-テキストの塗りつぶし色: 透明;
    }
    .book .write i{
        フォントの太さ: 700;
    }
    .book .cover{
        位置: 絶対;
        上: 0;
        左: 0;
        幅: 100%;
        高さ: 70%;
        背景画像: url(cofe.jpg);
        背景サイズ: カバー;
    }


</スタイル>


<本文>
    <div class="book">
        <div class="カバー"></div>
        <h2>ブック <span>javascript</span></h2>
        <span class="wirte"> ファンによる執筆</span>
    </div>
</本文>
</html>

要約する

CSS で 3D ブック効果を実現する方法についての記事はこれで終わりです。CSS 3D ブックの関連コンテンツについては、123WORDPRESS.COM の過去の記事を検索するか、以下の関連記事を引き続き参照してください。今後も 123WORDPRESS.COM を応援していただければ幸いです。

<<: JavaScript の絶妙なスネーク実装プロセス

>>: タオバオウェブサイトの商品詳細説明ページのデザインに関する分析と意見（写真）