純粋な CSS を使用して 3D 回転効果を実装するサンプル コード

純粋な CSS を使用して 3D 回転効果を実装するサンプル コード

3D効果を実現するには、主にCSSのpreserve-3dプロパティとperspectiveプロパティを使用します。

効果

HTMLコード

<本文>
    <div class="box">
        <div class="正面">
            <h2>前面</h2>
        </div>
        <div class="face back">
            <h2>戻る</h2>
        </div>
    </div>
</本文>

効果を実証するには、要素を中央に配置し、本体のCSSを設定します。

*{
    マージン: 0;
    パディング: 0;
}

体{
    幅: 100%;
    高さ:100vh;
    ディスプレイ: フレックス;
    コンテンツの中央揃え: 中央;
    アイテムの位置を中央揃えにします。
    背景: #333;
}

ボックスプロパティ設定

。箱{
    幅: 300ピクセル;
    高さ: 400px;
    変換スタイル: 3D を保持します。
    位置: 相対的;
}

。顔{
    位置: 絶対;
    左: 0;
    上: 0;
    幅: 100%;
    高さ: 100%;
    変換スタイル: 3D を保持します。
    ディスプレイ: フレックス;
    コンテンツの中央揃え: 中央;
    アイテムの位置を中央揃えにします。
    背面の可視性: 非表示;
    遷移: 2 秒のイーズインアウト;
    変換: 視点(500px)、Y方向回転(0度);
}

フロントプロパティ設定

.face.front{
    背景: #ff0;
}

バックプロパティ設定、Y軸で180度回転、最初に表示しない

.face.back{
    背景: #3bc2ff;
    色: #fff;
    変換: 視点(500px) Y方向回転(180度);
}

フローティングアニメーション効果を設定する

.box:hover .face.front{
    変換: 視点(500px) Y方向回転(180度);
}

.box:hover .face.back{
    変換: 視点(500px) Y方向回転(360度);
}

テキストのフローティング効果を設定する

.box .face h2{
    フォントサイズ: 4em;
    テキスト変換:大文字;
    変換: perspective(500px) translateZ(50px);
}

以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。

<<:  ウェブサイトのユーザビリティを向上させる10のヒント

>>:  iframe を更新する 3 つの方法

推薦する

要素の幅(高さ)の適応を実現するCSSおよびCSS3の柔軟なボックスモデル

1. CSSは左の固定幅と右の適応幅を実現します1. ポジショニング <!DOCTYPE ht...

要素UIポップアップコンポーネントをカプセル化する手順

el-dialogをコンポーネントとしてカプセル化するelement-ui を使用する場合、ポップア...

Linux で at および cron スケジュールタスクをカスタマイズする方法

Linux システムには 2 種類のスケジュールされたタスクがあります。1 つは 1 回だけ実行され...

Windows での Apache+Tomcat7 負荷分散構成方法の詳細な説明

準備Windows Server 2008 R2 Enterprise (2.40GH、8GB、64...

MySQLデータテーブルの基本操作:テーブル構造の操作、フィールド操作例の分析

この記事では、テーブル構造操作やフィールド操作など、MySQL データ テーブルの基本的な操作につい...

Vueは質問応答機能を実装する

1. リクエスト回答インターフェース2. ユーザーの回答が正しいかどうかを判断します。回答が正しい場...

LDAP ユーザー認証を使用するように Linux を構成する方法

私は CentOS に実装された LDAP ユーザー管理を使用しています。これはインターネット上のほ...

Vue3コンポーネントの開発詳細

目次1. はじめに2. コンポーネント開発1. コンポーネントの構成2. ヘッダーコンポーネントの開...

MySQLの浅いエントリと深いエグジットの原則についての簡単な説明

目次1. ページの概要2. 下限と上限3. ページディレクトリを使用する4. ページの実際の外観4....

Linux で最も頻繁に使用されるターミナル コマンドのトップ 10 のリストを取得します。

私が最も頻繁に使用するコマンドは次の通りです:選択肢CDギットls ssh須藤数週間前、私はこの R...

Vue は Ctrip のカルーセル効果を模倣します (スライディング カルーセル、以下は高度に適応)

まずケースを見てみましょう。vue+swiper を使用して実装します。スライドの高さが異なる場合、...

データベースインデックスの知識ポイントの概要

目次ファーストルックインデックスインデックスの概念インデックスファイルの構成インデックスの役割SQL...

MySQLデータベースバックアップのさまざまな実装方法の概要

この記事では、MySQL データベースのバックアップを実装するさまざまな方法について説明します。ご参...

テキストエリアをレイアウトしたときにテキストが左下にあり、サイズを変更できない問題の解決策

2つの小さな問題ですが、長い間私を悩ませていました。最初の質問テキストエリアの左側のテキストは常にテ...

JavaScript はモーダルボックスのドラッグ効果を実現します

これはモーダル ボックスのドラッグのケースです。ここで実装する関数は次のとおりです。 1. ポップア...