問題
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を使って入れ違いに裏返してあげれば完成です。
