CSS3 を使用して 3D のめくり本の効果を実現する方法-CSSチュートリアル-php.cn

ホームページ

ウェブフロントエンド

CSSチュートリアル

CSS3 を使用して 3D のめくり本の効果を実現する方法

不言

Jun 25, 2018 pm 04:56 PM

3d css3

この記事では、CSS3 の新しいプロパティであるアニメーションと変換に基づいて、同様のフリップブック効果を実現します。興味のある方は参考にしてください。、レンダリング: (スタイルは少し醜いですが、無視できます。効果は良好です。変更を容易にするために後で他のプロジェクトに追加されます 0.0)

回転の効果に似ています本来の意味は、一度クリックした後、setIntervalを使用して本のページをめくるアニメーションを制御することですが、本のページが180度回転するとき、setIntervalをクリアします。以前に 180 度回転されていない本のページは、前のアクションを続行できません。setInterval をクリアする方法を使用できますが、アニメーション効果がよくないように感じます。もちろん、他の解決策もあります。、しかし、CSS3 がアニメーションを提供していることに突然気づきました。アニメーションを追加することで、この問題を直接回避できます。デフォルトでは、アニメーションは毎回実行されるので、いつでも実行できます。接続されたドットが表示され、図のように各ページが自然に回転します。以下のコードと実装手順を貼り付けます。

注: この例の JS 部分はネイティブ JS で書かれています。ネイティブ JS の使用が苦手な場合は、 jQuery やその他のサードパーティのフレームワークを使用して書き換えることができます

html 部分: (この部分は誠実です...、忘れてください、ただ醜いだけです~.~)

<body>
    <!-- 所展示的书的内容 -->
    <p class="book">
        <p class="page">
            <span>1</span>
            <span>2</span>
        </p>
        <p class="page">
            <span>3</span>
            <span>4</span>
        </p>
        <p class="page">
            <span>5</span>
            <span>6</span>
        </p>
        <p class="page">
            <span>7</span>
            <span>8</span>
        </p>
        <p class="page">
            <span>9</span>
            <span>10</span>
        </p>
        <p class="page">
            <span>11</span>
            <span>12</span>
        </p>
        <p class="page">
            <span>13</span>
            <span>14</span>
        </p>
        <p class="page">
            <span>15</span>
            <span>16</span>
        </p>
        <p class="page">
            <span>17</span>
            <span>18</span>
        </p>
        <p class="page">
            <span>19</span>
            <span>20</span>
        </p>
    </p>
    <!-- 用来控制上一页和下一页操作 -->
    <input type="button" value="上一页" id="before"/>
    <input type="button" value="下一页" id="after"/>
</body>

ログイン後にコピー

CSS 部分: (の値を変更することで)変形時に回転させると、本のページを反転する効果が得られます)

<style>   
        .book{   
            width: 460px;   
            height: 300px;   
            position: relative;   
            margin: 150px 400px;   
            -webkit-transform-style: preserve-3d;   
            -moz-transform-style: preserve-3d;   
            -ms-transform-style: preserve-3d;   
            transform-style: preserve-3d;   
            transform: rotatex(30deg);   
        }   
        .page{   
            width: 230px;   
            height: 300px;   
            border: 1px solid #666;   
            position: absolute;   
            rightright: 0;   
            transform-origin: left;   
            transform-style: preserve-3d;   
            backface-visibility:hidden;   
            font-size: 60px;   
            text-align: center;   
            line-height: 300px;   
        }   
        .page span{   
            display: block;   
            width: 100%;   
            position: absolute;   
            background-color: #00FFFF;   
        }   
        .page span:nth-child(2){   
            transform: rotatey(-180deg);   
            backface-visibility:hidden;   
        }   
        /*以下两个动画可以只使用第一个，animation中有reverse，可以反向执行动画， 
            使用时需要在JS中点击上一页时添加改属性值*/
        /*翻书下一页的动画*/
        @keyframes page {   
            0%{   
                transform: rotatey(0deg);   
            }   
            100%{   
                transform: rotatey(-180deg);   
                z-index: 10;   
            }   
        }   
        /*翻书上一页的动画*/
        @keyframes page1 {   
            0%{   
                transform: rotatey(-180deg);   
                z-index: 10;   
            }   
            100%{   
                transform: rotatey(0deg);   
            }   
        }   
    </style>

ログイン後にコピー

JS部分 (JS部分は主に、前/次のページをクリックしたときに対応するpにアニメーション属性を追加する実装です)

<script>   
    var before = document.querySelector("#before");   
    var after = document.querySelector("#after");   
    var book = document.querySelector(".book");   
    var page = document.getElementsByClassName("page"); 7     rotate();   
    function rotate(){   
        var middle = 0;12         for(var z=0;z<book.children.length;z++){   
            page[z].style.zIndex = book.children.length-z;   
        }   
        after.onclick = function(){   
            if(middle != book.children.length){   
                page[middle].style.animation = "page 1.5s linear 1 forwards";   
                middle++;   
            }else{   
                middle = book.children.length;   
            }   
        };   
        before.onclick = function(){   
            if(middle != 0){   
                page[middle-1].style.animation = "page1 1.5s linear 1 forwards";   
                middle--;   
        }else{   
            middle = 0;   
            }   
        }   
    }   
</script>

ログイン後にコピー

最後の JS 部分の主な機能は、前/次のページをクリックしたときに対応する p にアニメーション属性を追加することです。アニメーションの詳細な説明については、API を確認する必要があります。

互換性の問題のため、ここでのより良い解決策は、アニメーションの代わりにクラスを追加することです。より多くのブラウザに適応するには、プレフィックス -webkit-、-moz- · · · · · · を追加する必要があります。これらをクラスに追加してクラスを直接追加するか、関数を作成してそれをカプセル化し、必要な文字列を直接出力できるようにします。

上記がこの記事の全内容です。その他の関連コンテンツについては、PHP 中国語 Web サイトをご覧ください。

関連する推奨事項: カード回転切り替え効果を実現するための

js と CSS3

CSS3 3D 回転回転効果の使用方法の紹介

以上がCSS3 を使用して 3D のめくり本の効果を実現する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

このウェブサイトの声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

ホットAIツール

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

脱衣画像を無料で

Clothoff.io

AI衣類リムーバー

Video Face Swap

完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。

ホットツール

メモ帳++7.3.1

使いやすく無料のコードエディター

SublimeText3 中国語版

中国語版、とても使いやすい

ゼンドスタジオ 13.0.1

強力な PHP 統合開発環境

ドリームウィーバー CS6

ビジュアル Web 開発ツール

SublimeText3 Mac版

神レベルのコード編集ソフト（SublimeText3）

ホットトピック

Gmailメールのログイン入り口はどこですか？

7667

CakePHP チュートリアル

1393

C# チュートリアル

1205

Steamのアカウント名の形式は何ですか

Win11 Activation Key Permanent

Related knowledge

純粋な CSS3 で波の効果を実現するにはどうすればよいですか? (コード例) Jun 28, 2022 pm 01:39 PM

純粋な CSS3 で波の効果を実現するにはどうすればよいですか?この記事ではSVGとCSSアニメーションを使って波のエフェクトを作成する方法をご紹介しますので、お役に立てれば幸いです。

なぜ自動運転ではガウススプラッティングが非常に人気があるのに、NeRF は放棄され始めているのでしょうか? Jan 17, 2024 pm 02:57 PM

上記と著者の個人的な理解 3 次元ガウシアンプラッティング (3DGS) は、近年、明示的な放射線フィールドとコンピューターグラフィックスの分野で出現した革新的なテクノロジーです。この革新的な方法は、数百万の 3D ガウスを使用することを特徴とし、主に暗黙的な座標ベースのモデルを使用して空間座標をピクセル値にマッピングする神経放射線場 (NeRF) 方法とは大きく異なります。明示的なシーン表現と微分可能なレンダリングアルゴリズムにより、3DGS はリアルタイムレンダリング機能を保証するだけでなく、前例のないレベルの制御とシーン編集も導入します。これにより、3DGS は、次世代の 3D 再構築と表現にとって大きな変革をもたらす可能性のあるものとして位置付けられます。この目的を達成するために、私たちは 3DGS 分野における最新の開発と懸念について初めて体系的な概要を提供します。

Microsoft Teams の 3D Fluent 絵文字について学ぶ Apr 24, 2023 pm 10:28 PM

特に Teams ユーザーの場合は、Microsoft が仕事中心のビデオ会議アプリに 3DFluent 絵文字の新しいバッチを追加したことを覚えておく必要があります。 Microsoft が昨年 Teams と Windows 向けの 3D 絵文字を発表した後、その過程で実際に 1,800 を超える既存の絵文字がプラットフォーム用に更新されました。この大きなアイデアと Teams 用の 3DFluent 絵文字アップデートの開始は、公式ブログ投稿を通じて最初に宣伝されました。 Teams の最新アップデートでアプリに FluentEmojis が追加 Microsoft は、更新された 1,800 個の絵文字を毎日利用できるようになると発表

カメラかライダーを選択しますか?堅牢な 3D オブジェクト検出の実現に関する最近のレビュー Jan 26, 2024 am 11:18 AM

0.前面に書かれています&& 自動運転システムは、さまざまなセンサー (カメラ、ライダー、レーダーなど) を使用して周囲の環境を認識し、アルゴリズムとモデルを使用することにより、高度な知覚、意思決定、および制御テクノロジーに依存しているという個人的な理解リアルタイムの分析と意思決定に。これにより、車両は道路標識の認識、他の車両の検出と追跡、歩行者の行動の予測などを行うことで、安全な運行と複雑な交通環境への適応が可能となり、現在広く注目を集めており、将来の交通分野における重要な開発分野と考えられています。。 1つ。しかし、自動運転を難しくしているのは、周囲で何が起こっているかを車に理解させる方法を見つけることです。これには、自動運転システムの 3 次元物体検出アルゴリズムが、周囲環境にある物体 (位置を含む) を正確に認識し、記述することができる必要があります。

CLIP-BEVFormer: BEVFormer 構造を明示的に監視して、ロングテール検出パフォーマンスを向上させます。 Mar 26, 2024 pm 12:41 PM

上記および筆者の個人的な理解: 現在、自動運転システム全体において、認識モジュールが重要な役割を果たしている｡道路を走行する自動運転車は、認識モジュールを通じてのみ正確な認識結果を得ることができる｡下流の規制および制御モジュール自動運転システムでは、タイムリーかつ正確な判断と行動決定が行われます。現在、自動運転機能を備えた自動車には通常、サラウンドビューカメラセンサー、ライダーセンサー、ミリ波レーダーセンサーなどのさまざまなデータ情報センサーが搭載されており、さまざまなモダリティで情報を収集して正確な認識タスクを実現しています。純粋な視覚に基づく BEV 認識アルゴリズムは、ハードウェアコストが低く導入が容易であるため、業界で好まれており、その出力結果はさまざまな下流タスクに簡単に適用できます。

Windows 11 のペイント 3D: ダウンロード、インストール、および使用ガイド Apr 26, 2023 am 11:28 AM

新しい Windows 11 が開発中であるというゴシップが広まり始めたとき、すべての Microsoft ユーザーは、新しいオペレーティングシステムがどのようなもので、何をもたらすのかに興味を持ちました。憶測を経て、Windows 11が登場しました。オペレーティングシステムには新しい設計と機能の変更が加えられています。いくつかの追加に加えて、機能の非推奨と削除が行われます。 Windows 11 に存在しない機能の 1 つは Paint3D です。描画、落書き、落書きに適したクラシックなペイントは引き続き提供していますが、3D クリエイターに最適な追加機能を提供する Paint3D は廃止されています。追加機能をお探しの場合は、最高の 3D デザインソフトウェアとして Autodesk Maya をお勧めします。のように

カード1枚で30秒でバーチャル3D嫁をゲット！ Text to 3D は、毛穴の詳細が明確な高精度のデジタルヒューマンを生成し、Maya、Unity、その他の制作ツールとシームレスに接続します May 23, 2023 pm 02:34 PM

ChatGPT は AI 業界に鶏の血を注入し、かつては考えられなかったすべてのことが今日では基本的な慣行になりました。進化を続ける Text-to-3D は、AIGC 分野において Diffusion（画像）、GPT（テキスト）に次ぐホットスポットとされ、前例のない注目を集めています。いいえ、ChatAvatar と呼ばれる製品が控えめなパブリックベータ版として公開され、すぐに 700,000 回を超えるビューと注目を集め、Spacesoftheweek で特集されました。 △ChatAvatarは、AIが生成した単一視点/多視点の原画から3Dの様式化されたキャラクターを生成するImageto3D技術にも対応しており、現在のベータ版で生成された3Dモデルは広く注目を集めています。