ログイン
問題6

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

アイコン画像

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

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

エディターのアイコンあらかじめエディタに書くコード

                <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を使って入れ違いに裏返してあげれば完成です。
ログインして解答を見る
完了にする!
twitterのアイコン
活動記録をTweetする
CSSAnimationを学ぶなら現役エンジニア監修「甲賀コース」
LINEの友達追加でお役立ち動画をGET!!

閉じる