CSS_html/css_WEB-ITnose で反転アニメーションを作成する

CSS アニメーションは非常に興味深いもので、エレガントなフェードインからより見事な効果まで、いくつかの簡単な属性で作成できます。コンテナの前面と背面に異なるアニメーションが含まれています。実装する内容。この記事では、この効果を達成するために可能な限り最も簡単な方法を使用します。

Card Flip Effect

View Demo

注: この記事は、このエフェクトの実行方法を説明する最初の記事ではありませんが、これに関する多くの記事は複雑すぎて、多くの余分なスタイルを追加していることがわかりましたコード この場合、読者はどのコードが必要でどのコードが不要であるかを判断できません。この記事ではこの問題は発生しません。必要なスタイルがいくつか含まれているだけで、めくる各ページを自由に美しくすることができます。

HTML 構造

次の HTML 構造は、2 つの側面を持つ効果を実現するためのものです:

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

ご想像のとおり、コンテンツ パネルは 2 つあります: 表と裏です。含まれている CSS スタイルがそれほど多くないことに驚かれるでしょう:

/* 整个容器，包括透视 */.flip-container {    perspective: 1000;}/* 鼠标放上去的时候翻转 */.flip-container:hover .flipper, .flip-container.hover .flipper {    transform: rotateY(180deg);}.flip-container, .front, .back {    width: 320px;    height: 480px;}/* 翻转速度设置 */.flipper {    transition: 1.5s;    transform-style: preserve-3d;    position: relative;}/* 翻转页的时候隐藏背面 */.front, .back {    backface-visibility: hidden;    position: absolute;    top: 0;    left: 0;}/* 前面板放在上面 */.front {    z-index: 2;    /* for firefox 31 */    transform: rotateY(0deg);}/* 背面初始的时候隐藏 */.back {    transform: rotateY(180deg);}

一般的な実装プロセスを見てみましょう:

• 一番外側のコンテナはアニメーション領域全体の視点範囲を設定します
• 内側のコンテナは実際には反転に使用されます。親コンテナがアクティブ化されると、要素は 180 度反転されます。ここでフリップ速度を制御します。フリップ角度を -180 度に変更すると、反対方向にフリップされます。
• 前面と背面の要素は、お互いの上にうまく重なるように明確に配置されています。 backface-visibility プロパティは非表示になっているため、前面または背面が表示されている場合、背面は非表示になります。
• フロント要素はリバース要素よりも高い z-index 属性値を持っているため、事前にエンコードして上部に表示できます。
• 反転要素を 180 度回転させて裏側になります。

これで、このシンプルな構造を配置したい場所に配置し、必要な前面と背面のスタイルを変更するだけです。

CSS アニメーションの専門家 Ana Tudor による解説

カード要素の属性に特定の値 (overflow: hidden など) を設定すると、3D 変換された子要素が無効になります。私はかつてこのように設定したため、これは重要であると考えています。その結果、すべての子要素が同じ 3D 変換を持つことになりました。

CSS Flip Switch

要素の反転を制御するために 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 垂直反転

垂直反転を実現するには、変換元の座標軸の値を追加する必要があります。垂直方向に反転するには、元の反転スタイルを更新する必要があります。

rreee

X軸を中心に反転した効果が確認できます。

IE ブラウザをサポート

IE ブラウザと互換性を持たせるには、コードにいくつかの変更を加える必要があります。IE はまだ最新の変換属性のすべてと互換性がないためです。 基本的に、前後の要素が同時に反転されます。

.vertical.flip-container {    position: relative;}.vertical .back {    transform: rotateX(180deg);}.vertical.flip-container .flipper {    transform-origin: 100% 213.5px; /* 高度值的一半 */}.vertical.flip-container:hover .flipper {    transform: rotateX(-180deg);}

上記のコードはIE10以降で動作します。

デモを見る

CSS反転アニメーションは非常に古典的であり、CSSアニメーションの応用例の代表例です。もう少し詳しく見てみると、これは 3D CSS アニメーション効果であり、CSS コードは実際には非常に小さいです。この効果は、HTML5 ゲームにとって非常にエレガントです。カードのような効果としては、まさに完璧です。

この記事は https://davidwalsh.name/css-flip から翻訳されたものです