Commune Advent Calendar 2024シリーズ1の 8日目の記事です。
今年のアドベントカレンダーでは「CSSだけで～」をたくさんやってみると決めているのですが、
今回からは前後編にわけて「ほとんどCSSだけでブラックジャックを作ってみた」というテーマで進めたいと思います。
今回は前編として、カードを裏表させるエフェクトの実装をやってみます。よろしくお願いします。
今回作るもの
トランプのカードが裏にして複数枚並んでいるところから、ユーザーが２枚カードを選択肢表にする。というようなものを作ろうと思っています。
裏になっているカードを選択し、表にするときに「くるっ」となるアニメーションがあるとそれっぽくなりそうなので、それを作ります。
checkboxで状態制御
「クリックしたら裏表が変わる」をスクリプトを書かずに実現するにはinput[type="checkbox"]を使うのがよさそうです。
checkboxの選択可能範囲は::afterを使って拡張することができます。
input.card-checkbox::after {
display: block;
content: "";
width: 100%;
height: 100%;
cursor: pointer;
}
checkboxの状態は擬似クラス:checkedを使って参照できます。
表示されるカードはcheckboxの兄弟要素として用意し、以下のようにcheckedの場合に任意のスタイルが適用されるようにしまそゆ。
.card {
opacity: 0;
}
input.card-checkbox:checked + .card {
opacity: 1;
}
できました！
裏表の制御
3Dに回転するアニメーションを適用するにはtransform-style: preserve-3dを使います。
preserve-3dを適用したうえでtransformをすると立体に回転させることができます。
ただ、これだけだと180度回転させたときにその要素を裏から見た形で表示されてしまいます。
その問題を回避するためにbackface-visibilityを使います。
backface-visibilityはその名のまま、背面を見せるかどうかを制御するもので、hiddenにしておけば裏面が見えなくなります。
この2つのCSSプロパティを使って
- カード裏面はデフォルトで無回転(0deg)、選択されると裏返す(180deg)
- カード表面はデフォルトで裏(-180deg)、選択されると表にする(0deg)
というように実装をすすめます。
完成！
というわけで、完成したものがこちらです。
いい感じになりました
後半へ続く...
Discussion