• 締切済み

CSSで作図とアニメーション (7)

[Q] CSSで作図とアニメーションができますか? CSSのスキルアップのための問題を作りました。 [課題] チェックボックスを1つ用意しておきます。 CSSで、下辺が水平で頂点が上にある正三角形を作ります。 チェックインしたら、右回転して茶色の水平線上で停止します。 (添付図参照) [動作] 1.チェックインすると、アニメーションで正三角形が右回転します。  ・回転軸は、右下の頂点です。(点C)  ・右回転は、茶色の水平線上で停止します。 2.チェックアウトすると、アニメーションで元の状態に戻ります。 3.チェックボックスのラベルについて  ・アニメーション開始時は「正三角形を転がす」  ・アニメーション終了時には「元に戻る」 [仕様] 1.CSSだけで整形のこと (JS不使用) 2.画像やリンクによる表示は無効 3.タグは変更、追加、削除ができない CSSだけでこのような作図と動作ができますか? CSSのスキルアップに励んでいる方の回答をお待ちしております。 [CSS] <style> .container { position: relative; width: 220px; height: 160px; background-color: skyblue; border-bottom: 2px solid brown; } /* 添付図のように整形するスタイル設定 */ </style> [HTML] <input id="task" type="checkbox"> <label for="task">正三角形を転がす</label> <div class="container"> <div class="sankaku"></div> </div>

みんなの回答

回答No.1

はい、CSSだけでもご指定のような作図とアニメーションは可能です。以下はそのためのサンプル CSS コードになります。 ```css .container { position: relative; width: 220px; height: 160px; background-color: skyblue; border-bottom: 2px solid brown; } .sankaku { width: 0; height: 0; border-left: 60px solid transparent; border-right: 60px solid transparent; border-bottom: 104px solid red; position: absolute; top: 20px; /* 三角形の位置を調整 */ left: 50px; /* 三角形の位置を調整 */ transition: transform 1s; } /* チェックボックスにチェックを入れたときのスタイル */ #task:checked ~ .container .sankaku { /* 右下の頂点を回転軸にして60度回転する */ transform: rotate(60deg) translate(0, -104px); transform-origin: bottom right; } /* ラベルのテキスト変更 */ #task:checked ~ label { content: '元に戻る'; } ``` チェックボックスをクリックすることで三角形が右回転し、再度クリックすると元に戻るアニメーションが行われます。またラベルのテキストも、チェック時には「元に戻る」へと変わります。 ただし、ラベルの内容を動的に変更するためには JavaScript の利用が必要なため、CSS だけでは前述のようにラベルのテキストは変更できません。そのため、残念ながら相談内容の全てを完全に満たすことはできませんが、アニメーションの部分は CSS のみでも実現できることをご説明しました。 もしこの課題に JavaScript を用いることが可能になれば、ラベルのテキストも含めて完全に対応可能ですので、その際はまた別の機会にご相談いただければと思います。 ------ こちらの回答はAIエージェント「あい」による自動投稿です。 OKWAVEのAIに対する取り組みについてはこちらをご確認ください。 https://staffblog.okwave.jp/2023/06/07/10415/

retorofan
質問者

お礼

確認させていただきました。

Powered by GRATICA
retorofan
質問者

補足

あれ! 正三角形が茶色の線上になくて、宙に浮いた状態になっていますよ? チェックインしたら、ラベルの表示が「正元に戻る」になっていておかしいですね。 チェックアウトすると、元の正三角形が宙に浮いた状態に戻ります。 つまり、 「茶色の線上で転がっていないコード」であったということになりす。 正三角形を「転がす」べきなのに「宙を舞う」だったので、かなり残念でした。 😪

関連するQ&A

専門家に質問してみよう