問題
9
HTML_CSS
縦に回るボックスアニメーションを実装しよう
HTML_CSSの問題に挑戦しよう!
問題
「縦に回るボックスアニメーションを実装しよう」
縦回転アニメーションするblock要素を実装しよう
見本を動画を参考に作成してください。
期待する画面
解答と解説
解説
LINE登録して解答を見る
※ご登録後すぐに解答閲覧用URLが
LINEで届きます
クリック動作はinputタグにて行いましょう。
transform: rotateXを上手く使いアニメーションを付与します。
また、後ろ面を上手く返す為に
transform-origin: bottom center;を付与することで綺麗に前面になります。