問題

6
CSSアニメーション

要素が裏返るアニメーション

CSSアニメーションの問題に挑戦しよう!

問題

要素が裏返るアニメーション

クルッと裏返るアニメーションを作ってみよう!
裏側にその要素の説明などを入れることが多いですね

あらかじめエディタに書くコード

                    <div class="box">
  <div class="front">表</div>
  <div class="back">裏</div>
</div>
¥HTML¥
                
                    .box{
  width: 100px;
  height: 100px;
  position: relative;
}
.front,.back{
  position: absolute;
  top: 0;
  left: 0;
  width: inherit;
  height: inherit;
  background-color: cornflowerblue;
  line-height: 100px;
  text-align: center;
  font-size: 3em;
}
.back{
  background-color: cadetblue;
}
¥CSS¥
                

期待する画面

解答と解説(要素が裏返るアニメーション)

解説

LINE登録して解答を見る

※ご登録後トークルーム下部にあるメニュー内
「無料問題集※解答付き」を押すと
解答閲覧用URLが届きます

backface-visibilityにhiddenを適用すると、transformなどによって裏返った時に要素の裏側を隠すことができます。

はじめに裏の方だけ裏返しておいて、あとは簡単で要素をtransform、rotateを使って入れ違いに裏返してあげれば完成です。

さらにスキルアップしたい方は公式LINEから「CSSアニメーション」と送信すると動画が見れます。

LINE登録して動画を視聴する
あなたに合った学習プランは?LINE適正コース診断はこちら