5

単純なJavaScriptとCSSを使用し、ライブラリやプラグインを使用せずに、DIVでカードフリップ効果（Webkitトランジションおよび3D変換と同じ）を作成したいと思います。どうすればこれを達成できますか？ほとんどのCSS3プロパティはWebkitブラウザで機能するため。また、ほとんどのjavascriptソリューションは、jqueryやそのプラグインなどのライブラリを使用しています。ライブラリを使用せず、javascript / CSSのみを使用し、クロスブラウザで動作するソリューションを探しています。

どんな助けでもいただければ幸いです。

よろしく、manishekhawat

4

2 に答える 2

2

実装方法:

CSS アニメーションはとても楽しいものです。それらの美しさは、多くの単純なプロパティを使用して、エレガントなフェードインから WTF-Pixar 自慢の効果まで、あらゆるものを作成できることです。その中間に位置する CSS 効果の 1 つは、CSS フリップ効果です。これにより、特定のコンテナーの前面と背面の両方にコンテンツが表示されます。このチュートリアルでは、その効果をできるだけ簡単な方法で作成する方法を示します。

HTML

両面効果を実現するための HTML 構造は、次のようになります。

<div class="flip-container" ontouchstart="this.classList.toggle('hover');">
    <div class="flipper">
        <div class="front">
            <!-- front content -->
        </div>
        <div class="back">
            <!-- back content -->
        </div>
    </div>
</div>

ご想像のとおり、「 front」と「back 」の 2 つのコンテンツ ペインがありますが、CSS によって説明される非常に特殊な役割を持つ要素を含む 2 つのペインもあります。また、タッチ スクリーンでペインを交換できるようにする ontouchstart ピースにも注意してください。

CSS

/* entire container, keeps perspective */
.flip-container {
    perspective: 1000;
}
    /* flip the pane when hovered */
    .flip-container:hover .flipper, .flip-container.hover .flipper {
        transform: rotateY(180deg);
    }

.flip-container, .front, .back {
    width: 320px;
    height: 480px;
}

/* flip speed goes here */
.flipper {
    transition: 0.6s;
    transform-style: preserve-3d;

    position: relative;
}

/* hide back of pane during swap */
.front, .back {
    backface-visibility: hidden;

    position: absolute;
    top: 0;
    left: 0;
}

/* front pane, placed above back */
.front {
    z-index: 2;
    /* for firefox 31 */
    transform: rotateY(0deg);
}

/* back, initially hidden pane */
.back {
    transform: rotateY(180deg);
}

プロセスの大まかな概要は次のとおりです。

  • 外側のコンテナーは、アニメーション領域全体の視点を設定します

  • 内側のコンテナは、実際に反転する要素であり、親コンテナにカーソルを合わせると 180 度回転します。これは、トランジション速度を制御する場所でもあります。回転を -180 度に変更すると、要素が逆方向に回転します。

  • フロント要素とバック要素は絶対的に配置されるため、同じ位置で互いに「重ね合わせる」ことができます。背面の可視性が隠されているため、反転した要素の背面はアニメーション中に表示されません。

  • フロント エレメントはバック エレメントよりも高い z-index を持っているため、フロント エレメントが最初にコード化される可能性がありますが、それでも上に表示されます。

  • バック要素は、バックとして機能するように 180 度回転します。

本当にそれだけです！このシンプルな構造を所定の位置に配置し、各面を好きなようにスタイリングしてください!

CSS フリップ トグル

エレメントのみを JavaScript 経由でフリップオン コマンドにしたい場合は、単純な CSS クラス トグルを使用するとうまくいきます。

.flip-container:hover .flipper, .flip-container.hover .flipper, .flip-container.flip .flipper 
{
    transform: rotateY(180deg);
}

コンテナー要素にフリップ クラスを追加すると、JavaScript を使用してカードがフリップされます。ユーザーがホバーする必要はありません。のような JavaScript コメント

document.querySelector("#myCard").classList.toggle("flip")フリップをします！

CSS 垂直反転

垂直反転の実行は、軸を反転して変換元の軸の値を追加するのと同じくらい簡単です。フリップの原点を更新し、カードを反対方向に回転させる必要があります。

.vertical.flip-container {
    position: relative;
}

    .vertical .back {
        transform: rotateX(180deg);
    }

    .vertical.flip-container .flipper {
        transform-origin: 100% 213.5px; /* half of height */
    }

    .vertical.flip-container:hover .flipper {
        transform: rotateX(-180deg);
    }

Y ではなく、X アクセスが使用されていることがわかります。

すべての功績は開発者 David Walsh に帰属します。コンテンツを複製しました。

于 2015-03-04T19:33:38.467 に答える
2

CSS3 の 3d Transforms は現在、Webkit ブラウザーでのみ機能します。申し訳ありませんが、cssSandpaper ( http://www.useragentman.com/blog/csssandpaper-a-css3-javascript-library/ )などの JS ポリフィルを使用せずに、他のブラウザーでこれを行う方法はありません。

ただし、JS バージョンをロードするときにパフォーマンスが大幅に低下するため、これはお勧めできません。

3d Transforms とキーフレーム アニメーションはまだ (かなり) CSS3 仕様の新しい機能であるため、最新のブラウザー (サファリ、クローム) でのみ採用されています。JavaScript を必要としないクロスブラウザー ソリューションが必要な場合は、数年間、黙って待つ必要があります。

于 2012-01-23T19:27:24.793 に答える