いにしえのテーブルレイアウト時代からWebサイト制作に関わっていた身からすると、表現力豊かになったCSSは楽しい。
楽しいけど、実際さほど使う機会がなかったりする。
たまたま使う機会があったので、忘れないように自分メモ。

確認環境

macOS Catalina(10.15.7)
- Firefox(90.0.2)
- Safari(14.1.2)
- Chrome(92.0.4515.131)
Windows10[Parallels Desktop]
- Chrome(92.0.4515.131)
- Edge(92.0.902.67)
iPhone
- safari(605.1.15, iOS 14.7.1)
- safari(604.1, iOS 15.0 beta4)
Android
- Chrome(91.0.4472.120, Android 8.0.0)
- Chrome(92.0.4515.131, Android 11)

トランプカードをくるくる回したい

Javascriptを使わずにぐるぐる回したい。
404とかのエラー画面にも使いたいので、理想はエンドレスでぐるんぐるん回って欲しい。

まずは、マウスオーバーでくるんと回るものから試してみる。

用意するもの

トランプカードの表画像
トランプカードの裏画像

トランプカードをくるくる回したい - マウスオーバーで回す

マウスが重なるとカードをくるっと回したい。これは結構簡単。

See the Pen Playing Card Click to Flip by Mari Takahashi (@mrd-takahashi) on CodePen.

transformプロパティ

CSS

.stage {
    position: relative;
    padding-top: 2rem;
    margin: 0 auto;
    width: 11.25rem;
    height: 20rem;
    transform: rotateZ(10deg);
}

水平ではなく、ちょっと斜めにしておきたいので、transform: rotateZ(10deg);と指定。
degはdegree(度)の略なので、Z軸に10度傾けています。

値	2D(X,Y軸)	3D(X,Y,Z軸)	説明
translate	○	○	移動
rotate	○	○	移動
scale	○	○	サイズ
skew	○		傾斜

transform-style・transitionプロパティ

CSS

.stage_cardImage {
    position: relative;
    transform-style: preserve-3d;
    transition: all 1s ease-in-out;
}

transform-styleプロパティ

初期値は2D(flat)のため、奥行きがある3D(preserve-3d)表現をしたい場合は親要素に追加。
今回はカードの親要素.stage_cardImageにpreserve-3dを指定。

transitionプロパティ

アニメーション方法を指定する。ショートハンドで書いているのでリスト化。

プロパティ	説明	値	今回設定
transition-property	変化を適用するプロパティの指定	all=全て適用(初期値) none=適用しない [プロパティ名]=プロパティ名をカンマ区切りで指定	all
transition-duration	1回当たりの時間	[数字]s=秒 [数字]ms=ミリ秒	1s
transition-timing-function	アニメーションの加減速	別項	ease-in-out
transition-delay	開始までの時間	[数字]s=秒 [数字]ms=ミリ秒

backface-visibilityプロパティとsafari用の対応

CSS

.stage_cardImage div {
    position: absolute;
    width: 100%;
    height: 100%;
    text-align: center;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

要素が裏返しになった時、backface-visibilityで可視(visible)・不可視(hidden)を指定します。
ほとんどのブラウザは対応済みですが、safariのみプレフィックスが必要(2021/08/13現在)。
これを追加しないとアニメーションがガタつきます。

参考："backface-visibility" | Can I use... Support tables for HTML5, CSS3, etc

今回は裏面を別に用意しているのでhiddenで不可視にします。

マウスオーバー時に回すためのtransformプロパティ

CSS

.stage_cardImage_back {
    transform: rotateY( 180deg );
}

.stage_cardImage:hover {
  transform: rotateY( 180deg );
  cursor: pointer;
}

マウスオーバーした時に、意図通りにアニメーションさせるために必要な設定。
カードは表からスタートしたいので.stage_cardImage_backは**rotateY( 180deg )にします。
裏からスタートしたい場合はrotateY( 0deg )**にします。

この辺りは、いろいろ数値変えると面白いものできるかも。

タッチデバイス(スマホ・タブレット)用の対応

HTML<div class="stage_cardImage" ontouchstart="">のontouchstart=""はタッチデバイス(スマホやタブレット)用の対応。
マウスオーバーでアニメーションするので、CSSでは.stage_cardImage:hover {…}という記述になっている。当然、タッチデバイスでは無効。
そこでontouchstart属性を指定してあげると、:hoverやactiveの設定が有効になります。
今回は親要素に設定しましたが、<body>タグに追加すればページ全体で有効にできます。
そのため、タッチデバイスでは、カードに触れると回転します。

トランプカードをくるくる回したい - エンドレスで回す

そもそも404などのエラー画面で使いたいので、勝手にくるくる回っているのが理想。
そのため、CSSをちょっと改造する。

See the Pen Playing Card CSS Animation by Mari Takahashi (@mrd-takahashi) on CodePen.

keyframesとanimetion

自動でくるくる回って欲しいので、キーフレームを利用しよう。

CSS

.stage_cardImage {
    animation: animation-cardImage 3s ease-in-out infinite alternate;
}

@keyframes animation-cardImage {
    0%  {transform: rotateY(0deg);}
    100%  {transform: rotateY(360deg);}
}

.stage_cardImage_back {
    transform: rotateY( 180deg );
}

animationプロパティ

ショートハンドで書いているのでリスト化。

プロパティ	説明	値	今回設定
animation-name	アニメーションの名前	任意	animation-cardImage
animation-duration	1回当たりの時間	[数字]s=秒 [数字]ms=ミリ秒	3s
animation-timing-function	アニメーションの加減速	別項	ease-in-out
animation-delay	開始までの時間	[数字]s=秒 [数字]ms=ミリ秒
animation-iteration-count	繰り返す回数	[数字]=再生回数 infinite=無限	infinite
animation-direction	アニメーションの向き	normal=同じ方向(初期値) alternate=偶数回は逆方向	alternate
animation-fill-mode	開始前と終了後の状態	none=なし(初期値) forwards=元の状態に戻らない(100%) backwards=元の状態に戻る(0%) both=forwardsとbackwardsの両方
animation-play-state	再生と停止	running=再生(初期値) paused=停止

アニメーションの加減速

アニメーションの加減速を設定する値。

値	説明	cubic-bezier値
ease	開始と完了を滑らかにする(初期値）	cubic-bezier(0.25, 0.1, 0.25, 1.0)
linear	一定	cubic-bezier(0.0, 0.0, 1.0, 1.0)
ease-in	ゆっくり始まる	cubic-bezier(0.42, 0, 1.0, 1.0)
ease-out	ゆっくり終わる	cubic-bezier(0, 0, 0.58, 1.0)
ease-in-out	ゆっくり始まりゆっくり終わる	cubic-bezier(0.42, 0, 0.58, 1.0)
cubic-bezier	3次ベジェ曲線のP1とP2を (x1, y1, x2, y2)で数値で指定

イラレで作図する際、「ベジェ曲線」には非常にお世話になってるんですが、数学の素養が必要なcubic-bezierは無視しますwww
無理www

参考サイト

初学者の場合、いちからCSSを書こうとするとかなり辛い。
一般的なアニメーション実装を参考にしつつ、そこから改造していくほうが理解しやすい。

さらに定着・発展させるには、まとめ記事を書くのが良いと個人的には思います。

CSSアニメーション

その他