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

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 の絶妙なスネーク実装プロセス

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

推薦する

CentOS 7.4 64 ビット版に MySQL 8.0 をインストールして設定するための詳細な手順

ステップ1: MySQL YUMソースを取得するMySQLの公式サイトにアクセスして、RPMパッケー...

HTMLにおけるbackground-image属性の設定の詳細な説明

写真といえば、まず背景画像が思い浮かびます。私たちの装飾の多くは背景画像を使用して実現されているから...

Windows サービス 2016 Datacenter\Stand\Embedded アクティベーション方法 (2021)

管理者権限でcmdを実行する slmgr /ipk CB7KF-BWN84-R7R2Y-793K2-...

uniapp プロジェクトをデスクトップ アプリケーションとしてパッケージ化する方法

Electronのインストール cnpm 電子をインストール -g electron-package...

CSS により、子コンテナが親要素を超えます (子コンテナは親コンテナ内で浮動します)

序文場合によっては、次の図のような浮動効果の要件が必要になります。 成し遂げる標準的な通常の状況では...

Docker Desktop で rocketmq をインストールするための非常に詳細なチュートリアル

Dockerデスクトップをインストールするダウンロード先: Docker Desktop for M...

簡単な計算機を実装する小さなプログラム

この記事の例では、簡単な計算機を実装するための小さなプログラムの具体的なコードを参考までに共有してい...

ReactHooks バッチ更新状態とルートパラメータの取得例の分析

目次1. 一括更新の方法コンソール出力2. フックがルーティングパラメータを取得する方法実行効果1....

MySQLのワークベンチ例の詳細な説明

MySQL Workbench - モデリングおよび設計ツール1. モデルは、最も効果的で高性能なデ...

Zabbixで指定時間内の変化値を設定する方法の詳細な説明

背景説明: 既存の負荷分散装置には、付加価値状態にある指標があります (増加するだけで減少しないため...

ECMAScript の演算子を理解するための記事

目次単項演算子ブール演算子乗算演算子加法演算子関係演算子等価演算子条件演算子代入演算子カンマ演算子要...

Linuxシステムにmsfをインストールするプロセスの詳細な説明

または、インストールプロセスを自分で書き留めてください。私のサーバーシステムはAliyun Linu...

シェアしたい絶妙なApple風無料アイコン素材18セット

Apple マグカップのアイコンと追加機能 HD ストレージボックス – アドオンパックセイバースノ...

Tomcat で server.xml と content.xml を変更した後の自動復元の問題の解決方法

設定ファイルを server.xml と content.xml に書き込みます。サーバーを再起動す...

Vue v-for ループを書く 7 つの方法

目次1. v-forループでは常にキーを使用する2. 特定のスコープ内でv-forループを使用する3...