More than 3 years have passed since last update.

株式会社ピー・アール・オー【公式】

CSSアニメーションでカードをくるくる回す

Posted at 2021-08-12

いにしえのテーブルレイアウト時代から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アニメーション

その他

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up