ログイン

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

CSSAnimationの問題

CSSAnimation

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

問題

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

自分の環境に書くコード

              <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¥
            

期待する画面

コードのアイコン

解答ソースコード

              .front,.back{
  transition: all 1s ease;
  backface-visibility: hidden;
}
.back{
  transform: rotateX(180deg);
}
.box:hover .front{
  transform: rotateX(180deg);
}
.box:hover .back{
  transform: rotateX(0deg);
}
¥HTML¥
            
答えのアイコン

解説

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

はじめに裏の方だけ裏返しておいて、あとは簡単で要素をtransform、rotateを使って入れ違いに裏返してあげれば完成です。
ログインして解答を見る
完了にする!
LINEの友達追加でお役立ち動画をGET!!