[CSS] CSSでカードフリップアニメーションを作成します。

アニメーションは、ユーザーエクスペリエンスを強化するための強力な方法することができます。このレッスンでは、div要素の前面と背面を切り替える際に素敵な視覚効果を作成し、カードフリップアニメーションの作成を歩くだろうトランプのカードのようなカード、またはフラッシュカードを表すことを意味します。私たちは、JavaScriptとCSS変換のタッチを使用してこの効果を作成します。いいえフレームワークやライブラリは必要ありません。

 

.container { 
  ディスプレイ：フレックス。
  フレックス方向：コラム。
  ALIGN-アイテム：センター ; 
  幅：50vw。
  マージン：自動 ; 
} 

.card { 
  マージントップ：1rem。
  高さ：60vh。
  幅：100％ ; 
  位置：相対 ; 
} 

.cardFront、
.cardBack { 
  ボーダー半径：0.25rem ; 
  高さ：100％ ; 
  パディング左：0.5rem。
  パディング右：0.5rem。
  ボックスシャドウ：0 4PX計6Px -1px RGBA（0、0、0、0.1）、
    0 2ピクセル4PX -1px RGBA（0、0、0、0.06） 。
  幅：100％ ; 
  位置：絶対 ; 
  背面-可視性：隠されました ; 
  トランジション：0.5秒やすさを変換します。
} 

.cardBack { 
  変換：視点（600PX）回転Y（原稿180°） 。
  背景色：＃1 ebf4ff。
} 

.cardBack.flipped { 
  変換：視点（600PX）回転Y（値は0deg） 。
} 

.cardFront { 
  変換：視点（600PX）回転Y（値は0deg） 。
} 

.cardFront.flipped { 
  変換：視点（600PX）回転Y（-180deg） 。
}

<！DOCTYPE HTML > 
< HTML LANG = "EN" > 
  < 頭> 
    < メタ文字コード= "UTF-8"  /> 
    < メタ名= "ビューポート" コンテンツ= "幅=装置幅、初期の規模= 1.0"  /> 
    < メタHTTP-当量= "X-UA-互換性のある" コンテンツ= "IE =エッジ"  /> 
    < タイトル> CSSカードフリップ</ タイトル> 
    < リンクのrel = "スタイルシート" 
  ヘッド> 
  < 身体> 
    < divのクラス= "コンテナ" > 
      < ボタンタイプ= "ボタン" ID = "フリップBTNを" >フリップカード</ ボタン> 
      < divのクラス= "カード" > 
        < div要素のid = "バック" クラス= "cardBack" >戻る</ divの> 
        < DIV ID = "フロント" クラス= "cardFront" >フロント</ DIV > 
      </ DIV> 
    </ DIV > 
    < スクリプト> 
      CONST正面= のdocument.getElementById（' フロント' ）
      CONSTバック= のdocument.getElementById（' バック' ）
      CONST BTN = のdocument.getElementById（' フリップBTN ' ）
       関数handleFlip（）{ 
        フロント。 classList.toggle（' 反転' ）
        back.classList.toggle（' フリップ' ）
      }
      btn.addEventListener（' クリック' 、handleFlip）
     </ スクリプト> 
  </ ボディ> 
</ HTML >