CSS基礎編--CSS 3ピクチャ反転アニメーション技術詳細

CSSアニメーションはとても面白いです.このテクノロジーの美しさは、多くの簡単なプロパティを使用することで、きれいな消去効果を作成することができます.その代表的な1つがCSS画像の反転効果で、カードの表裏両面の内容を見ることができます.この効果を作成する方法を最も簡単な方法で説明します.
ネット上には他の教材がたくさんありますが、中には余分なコードスタイルがたくさん追加されています.読者が必要なものをはっきりさせる必要があります.それらは役に立たないです.本文はこれらの問題を避けて、必要なCSSコードだけをリストして、あなたはその上で自分の好きなスタイルを追加してこれらのカードを美化することができます.

HTMLコード

表裏効果を実現するHTMLコードは、次のように考えることができます.

あなたが考えているように、カード「前面」と「背面」をそれぞれ格納する2つの容器があるはずです.CSSを通じて、この2つの容器要素の役割を指定します.また、ontouchstartというjsは、タッチスクリーンを使用して反転動作をトリガーすることができます.明らかに、JavaScriptコードを一緒に置くように、このコードを単独で抽出する必要があります.

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;
}

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

次は、大まかなプロセス全体の原理です.

最外層のコンテナ要素にアニメーション領域全体のパース(perspective)プロパティを設定します.

外部コンテナ要素がマウスのサスペンションイベントに遭遇したとき、内部にカードが格納されているコンテナは180度回転します.ここも回転速度を制御する場所です.回転値を-180 degに設定すると、逆回転になります.

は、カードの正面と背面の要素が絶対的に位置決めされていることを示し、同じ位置で互いに遮蔽することができる.背面の可視性(backface-visibility)アトリビュートは非表示に設定されており、各カードの背面が反転しても見えません.

カードの正面を背面よりも高いz-index値に設定し、カードの正面が一番上にあることを保証します.

背面カードを180度回転させ、背面の役割を果たす.

これがすべてのコードの役割です!このコードをあなたのページに入れて、カードのスタイルを修飾すればいいです.
注意:カード要素のいくつかの属性に特定の値を設定します(likeなど).overflow: hidden)は、そのサブエレメントが3 D変換機能を失うことになる.私は彼の観点を認めた.本文の例でちょうど出会ったからだ.overflow: hiddenに関連するトラブルは、3 D変換サブ要素がすべて同じ平面に現れ、いくつかが180度回転した.

CSS反転のトリガー

JavaScriptで反転動作をトリガーするのが好きなら、次の簡単なcssスタイルクラスが役立ちます.

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

javascriptを使用してコンテナ要素にこのcss flipクラスを追加すると、カードの反転がトリガーされます.ユーザーがマウスを上に置く必要はありません.document.querySelector("#myCard").classList.toggle("flip")で実現!

CSS縦反転

縦反転を実行するのも簡単で、横反転と同じように transform-originの値を修正してX軸で回転させるだけです.

.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);
    }

ここでは、以前のrotateXではなく、rotateYを使用していることに注意してください.

IEにこのようなアニメーション技術をサポートさせる

IEは現代ブラウザのtransform機能を実現していないため、IEに対してこの標準のカード反転コードを特別に修正する必要がある.基本的な方法は、正面と背面の2つのカードを同時に反転させることです.

/* entire container, keeps perspective */
.flip-container {
    perspective: 1000;
    transform-style: preserve-3d;
}
    /*  UPDATED! flip the pane when hovered */
    .flip-container:hover .back {
        transform: rotateY(0deg);
    }
    .flip-container:hover .front {
        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;
    transition: 0.6s;
    transform-style: preserve-3d;

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

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

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

/* 
    Some vertical flip updates 
*/
.vertical.flip-container {
    position: relative;
}

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

    .vertical.flip-container:hover .back {
        transform: rotateX(0deg);
    }

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

上のこのコードを使って、IE 10でも正しくカードの反転ができました!
このCSSカード反転アニメーション技術は、CSSアニメーションが実現できる効果、さらには3 DCSSアニメーションが実現できる強力な効果を代表する古典的な例である.利点は、使用するコードが少なく簡単であることです.この効果はHTML 5アニメーションを作る上で非常に実用的で、完璧と言えます.

リファレンスアドレス

Create a CSS Flipping Animation

CSSピクチャ反転アニメーション技術詳細