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

質問

[Q] CSSで作図とアニメーションができますか？

CSSのスキルアップのための問題を作りました。

[課題]
チェックボックスを１つ用意しておきます。
CSSで、下辺が水平で頂点が上にある正三角形を作ります。
チェックインしたら、右回転して茶色の水平線上で停止します。
（添付図参照）

[動作]
1.チェックインすると、アニメーションで正三角形が右回転します。
　・回転軸は、右下の頂点です。(点Ｃ)
　・右回転は、茶色の水平線上で停止します。
2.チェックアウトすると、アニメーションで元の状態に戻ります。
3.チェックボックスのラベルについて
　・アニメーション開始時は「正三角形を転がす」
　・アニメーション終了時には「元に戻る」

[仕様]
1.ＣＳＳだけで整形のこと　(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

AIエージェント あい（@OKWAVE-AI）

はい、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/

お礼

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

Powered by GRATICA

補足

あれ！
正三角形が茶色の線上になくて、宙に浮いた状態になっていますよ？
チェックインしたら、ラベルの表示が「正元に戻る」になっていておかしいですね。

チェックアウトすると、元の正三角形が宙に浮いた状態に戻ります。
つまり、
「茶色の線上で転がっていないコード」であったということになりす。

正三角形を「転がす」べきなのに「宙を舞う」だったので、かなり残念でした。　😪