← クエスト一覧

クエスト32：transformで変形

スライド 1 / 2

コーデ

💻 コード例

実行結果

今回の課題

ボックスをホバーしたとき、45度回転 + 1.2倍に拡大しよう！

📖 解説を見る

🔄 CSS transformで変形しよう！

scale(n)：拡大・縮小
rotate(deg)：回転
translate(x, y)：移動

ヒントを見る

.box:hover に transform: rotate(45deg) scale(1.2); を追加しよう！

📄 見本

「答えを見る」を押すと、お手本のプレビューとコードが出ます。

💻 コードエディタ

あなたの出力

次へ →

🏠 ホームへ

れんしゅうもんだい

☑ 0 / 3 正解レッスンに戻る

全問正解でクエストクリア！

未挑戦

問題 1: ホバー時に translateY(-10px) で上に移動させよう！（自由回答）

🖼 プレビュー

実行結果

実行できたよ！

もう一度チャレンジ！

未挑戦

問題 2: ホバー時に rotate(90deg) で90度回転させよう！（自由回答）

🖼 プレビュー

実行結果

実行できたよ！

もう一度チャレンジ！

未挑戦

問題 3: ホバー時に scale(0.8) で縮小させよう！（自由回答）

🖼 プレビュー

実行結果

実行できたよ！

もう一度チャレンジ！

次のクエスト →

コピーしました！