CSS変換ページめくりアニメーションレコードの実装

CSS変換ページめくりアニメーションレコードの実装

ページめくりの問題のシナリオ

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 と互換性のあるコメント返信ポップアップマスク効果実装アイデア

推薦する

MySQL 10進数符号なし更新負数を0に変換

今日、インターフェースの同時実行の問題を検証したところ、これまでredisで解決していた同時実行のプ...

Webデザイン講座(4):素材と表現について

<br />前回のWebデザインチュートリアル:Webデザインチュートリアル(3):デザ...

Tomcat のプレースホルダーによるポート設定方法 (パラメータ指定方式)

仕事で必要になったため、インターネットで多くの情報を見つけましたが、それらはすべてコピーアンドペース...

jsオブジェクトの読み取り速度の詳細な例

1. リテラルとローカル変数へのアクセスは最も高速ですが、配列要素とオブジェクト メンバーへのアクセ...

標準のMySQL (x64) Windowsバージョンのインストール手順の詳細な説明

MySQL x64 はインストーラーを提供していません、インストーラーを提供していません、インストー...

div間のギャップの解決策

HTMLのdivブロックを使用していて、ブロックの中央をしっかりと接続できず、解決できない場合1. ...

MySQL共通インデックスとユニークインデックスの詳細な説明

シナリオ1. ID番号のフィールドを備えた市民システムを維持する2. ビジネス コードでは、重複する...

Docker Compose を使用して nginx のロード バランシングを実装する方法

Dockerネットワーク管理とコンテナIP設定に基づいてNginxロードバランシングを実装するすべて...

jsのイベントループ機構の解析

序文ご存知のとおり、JavaScript は本質的にシングルスレッドですが、ブラウザは非同期リクエス...

MySQL で JSON 形式のフィールドをクエリする詳細な説明

作業開発プロセス中に、顧客の名前、携帯電話番号、ID カード、およびドキュメントの種類を動的に保存す...

HTML ページでコンテンツの選択、コピー、右クリックを防止する方法の詳細な説明

時には、Web ページに掲載されているコンテンツが悪意のある人物に盗用されるのを望まないため、Web...

Linux で特定のユーザーにフォルダーのすべてのコンテンツを許可するにはどうすればよいですか?

【問題分析】 chown コマンドを使用できます。ここで ch は change (変更) を表し...

MySQL実践スキル: 2つのテーブルに異なるデータがあるかどうかを比較する方法の分析

この記事では、MySQL が 2 つのテーブルを比較して、異なるデータがあるかどうかを確認する方法を...

ウェブデザインにおけるキーワード設計手法の紹介

多くの場合、ホームページを作成するときに、Web ページ ヘッダー属性の設定を無視します。 Web ...

Linux サーバーのクイックアンインストールとノード環境のインストール (簡単に始められます)

1.まずnpmをアンインストールする sudo npm アンインストール npm -g 2. ノー...