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のヒント
1. CSSは左の固定幅と右の適応幅を実現します1. ポジショニング <!DOCTYPE ht...
el-dialogをコンポーネントとしてカプセル化するelement-ui を使用する場合、ポップア...
Linux システムには 2 種類のスケジュールされたタスクがあります。1 つは 1 回だけ実行され...
準備Windows Server 2008 R2 Enterprise (2.40GH、8GB、64...
この記事では、テーブル構造操作やフィールド操作など、MySQL データ テーブルの基本的な操作につい...
1. リクエスト回答インターフェース2. ユーザーの回答が正しいかどうかを判断します。回答が正しい場...
私は CentOS に実装された LDAP ユーザー管理を使用しています。これはインターネット上のほ...
目次1. はじめに2. コンポーネント開発1. コンポーネントの構成2. ヘッダーコンポーネントの開...
目次1. ページの概要2. 下限と上限3. ページディレクトリを使用する4. ページの実際の外観4....
私が最も頻繁に使用するコマンドは次の通りです:選択肢CDギットls ssh須藤数週間前、私はこの R...
まずケースを見てみましょう。vue+swiper を使用して実装します。スライドの高さが異なる場合、...
目次ファーストルックインデックスインデックスの概念インデックスファイルの構成インデックスの役割SQL...
この記事では、MySQL データベースのバックアップを実装するさまざまな方法について説明します。ご参...
2つの小さな問題ですが、長い間私を悩ませていました。最初の質問テキストエリアの左側のテキストは常にテ...
これはモーダル ボックスのドラッグのケースです。ここで実装する関数は次のとおりです。 1. ポップア...