純粋な 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 つの方法

推薦する

Vueのシンプルストアの詳しい説明

Vue におけるストアの最も単純な応用はグローバル ストレージです。ここでは、相互にジャンプするため...

XML構文の詳細な説明

1. 文書化ルール1. 大文字と小文字が区別されます。 2. 属性値は引用符(一重引用符または二重引...

div が iframe に覆われるいくつかの状況とその解決策

類似の構造:コードをコピーコードは次のとおりです。 <div></div>&...

別の種類の「キャンセル」ボタン

「キャンセル」ボタンは必要な操作プロセスの一部ではなく、デザイン上の主要な要素として表示されません...

Vue再帰コンポーネントの簡単な使用例

序文多くの学生は既に再帰に精通していると思います。アルゴリズムの問​​題を解決するために再帰がよく使...

Nginx サーバーで URL リンクを設定する方法

LNMPのようなアーキテクチャを持つウェブサイトは、一般的にPHPフレームワークに基づいて開発されて...

初心者向けに Docker に Jenkins をインストールする方法を詳しく説明したチュートリアル

Jenkins はオープンソース ソフトウェア プロジェクトです。Java をベースに開発された継続...

JS はシンプルなブロック崩しピンボールゲームを実装します

この記事では、ブロック崩しピンボールゲームを実装するためのJSの具体的なコードを参考までに紹介します...

divとtableの選択と組み合わせ方について簡単に説明します

ページレイアウトは、Web ページを扱い始めた頃からずっと気にかけていたことです。初期のテーブル構造...

Linux で XFS パーティション形式のルート ディレクトリを縮小する方法

目次序文システム環境現在のシステムパーティションレイアウトデータのバックアップレスキューモードに入る...

Ubuntu 18.04 は mysql 5.7.23 をインストールします

以前、Ubuntu 16.04 に MySQL をスムーズにインストールしました。今回、Ubuntu...

Zabbix でフィルターを使用して監視を実装する方法

最近、監視機器の作業をしていたとき、ポートがダウンしているというアラームが常に出ていました。データを...

MySQLのグループカウントと範囲集計を実装する2つの方法

1つ目:通常動作 選択 SUM(ddd) AS count_days、 場合 aa.days >...

ワンクリックで雨や雪のエフェクトを実現する ThingJS パーティクルエフェクト

目次1. パーティクルエフェクト2. シーンを読み込む3. さまざまな粒子効果の実現エンディング: ...

nginxで静的リソースを公開する方法

ステップ準備した静的リソースファイルを指定されたフォルダに配置しますnginx 設定ファイルを変更す...