ページめくりの問題のシナリオ BとCは同じページ(表と裏)にあります ページをめくって A をカバーしたい場合、B と C は同時にページをめくって A をカバーし、D を表示する必要があります。 BとCを同じボックスに記入することはできません 間違った例: <div class="pagesBox A"></div> <div class="pagesBox"> <div class="B"></div> <div class="C"></div> </div> <div class="pagesBox D"></div> 正しい例: <メイン> <div class="pagesBox A"></div> <div class="pagesBox B"></div> <div class="pagesBox C"> <div>コンテンツ</div> </div> <div class="pagesBox D"></div> </メイン> B と C を箱で包んで、裏返してみませんか? 答えは以下の通りです。 B 設定が必要 .B{ 背面の可視性: 非表示; } backface-visibility: hidden; このプロパティは、B の背面を非表示にします。 そして、絶対位置指定を使用して、B と C を重ね合わせます。 Cを設定する必要があります .C > div{ 変換: rotateY(-180deg); } 通常の内容は前面に表示されるため、C の内容を背面に反転する必要があります。紙の裏のように見えるようにする 上の質問に戻ると、なぜ箱を使わないのか BとCが入った箱を裏返したときに、裏面を隠すようにBを設定するのは無効だからです。 Bを裏返すことによってのみ、Bの裏側を隠すことができます。背面にCを表示。 すると、BとCのページがアニメーションでめくられます。 主要{ 視点:1800年; 変換スタイル: 3D を保持します。 } 。紀元前{ 遷移: 1 秒を変換します。 &。の上{ 変換: rotateY(180deg); } } CSS 変換ページめくりアニメーション レコードの実装に関するこの記事はこれで終わりです。より関連性の高い CSS ページめくりアニメーション コンテンツについては、123WORDPRESS.COM の以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM を応援していただければ幸いです。 |
<<: Docker Compose のサイドカーモードの詳細な説明
>>: IE 8/Chrome/Firefox と互換性のあるコメント返信ポップアップマスク効果実装アイデア
今日、インターフェースの同時実行の問題を検証したところ、これまでredisで解決していた同時実行のプ...
<br />前回のWebデザインチュートリアル:Webデザインチュートリアル(3):デザ...
仕事で必要になったため、インターネットで多くの情報を見つけましたが、それらはすべてコピーアンドペース...
1. リテラルとローカル変数へのアクセスは最も高速ですが、配列要素とオブジェクト メンバーへのアクセ...
MySQL x64 はインストーラーを提供していません、インストーラーを提供していません、インストー...
HTMLのdivブロックを使用していて、ブロックの中央をしっかりと接続できず、解決できない場合1. ...
シナリオ1. ID番号のフィールドを備えた市民システムを維持する2. ビジネス コードでは、重複する...
Dockerネットワーク管理とコンテナIP設定に基づいてNginxロードバランシングを実装するすべて...
序文ご存知のとおり、JavaScript は本質的にシングルスレッドですが、ブラウザは非同期リクエス...
作業開発プロセス中に、顧客の名前、携帯電話番号、ID カード、およびドキュメントの種類を動的に保存す...
時には、Web ページに掲載されているコンテンツが悪意のある人物に盗用されるのを望まないため、Web...
【問題分析】 chown コマンドを使用できます。ここで ch は change (変更) を表し...
この記事では、MySQL が 2 つのテーブルを比較して、異なるデータがあるかどうかを確認する方法を...
多くの場合、ホームページを作成するときに、Web ページ ヘッダー属性の設定を無視します。 Web ...
1.まずnpmをアンインストールする sudo npm アンインストール npm -g 2. ノー...