CSSでクルクル回す。

投稿日：2019年12月30日

実は、前回の面付けの記事で、表と裏の関係を静止した状態ではなく、CSSアニメーションでクルクル回そうかと目論んでいました。

▼こんな感じに。

▲ 1(7)	▲ 16(22)
▲ 8(14)	▲ 9(15)

▲ 15(21)	▲ 2(8)
▲ 10(16)	▲ 7(13)

.orichoRotate {
    animation: rotate 3s linear infinite;
}

@keyframes rotate {
    0% {
        transform: rotateY(0deg);
    }

    100% {
        transform: rotateY(360deg);
    }
}

これはCSS Animationのキーフレームアニメーションと呼ばれる物です。
@keyframesでアニメーション名をrotateと設定。
0%〜100%の間で動きを設定、セレクタにanimation: rotate 3s linear infinite;という形で渡しています。
3sは、3秒という意味。
linearイージングと呼ばれるものlinearは開始から終了まで直線的（一定）の動き。
infinite繰り返しinfiniteは永続的な繰り返し。

表面と裏面を重ねて表示し、表面が裏返ったら非表示にし、裏面を正向きに表示する。
裏面が裏返ったら非表示にし、表面を正向きに表示する。
クルクルクルクルと。。。
重ねて表示するにはposition:absolute; top:0; left:0;で可能だし、裏返ったら非表示にするのはbackface-visibility: hidden;で可能です。
ところが、裏面は始めからtransform: rotateY(180deg);で180度反転した状態にしておかなければいけない。

▼こんな感じに。

▲ 15(21)	▲ 2(8)
▲ 10(16)	▲ 7(13)

この状態でbackface-visibility: hidden;を当てると消えてしまいます。

▼こんな感じに。

▲ 15(21)	▲ 2(8)
▲ 10(16)	▲ 7(13)

当たり前の結果ですね。。。
なので、180度で非表示な物をCSSの回転アニメーションで表示させるのは不可能だとわかりました。
そこでJavaScript(jQuery)を使います。
対象のオブジェクトが180度回転、もしくはすでに180度になっていたら非表示にし、正向きになったら表示させるようなプログラムを書きます。

frontRotate("#table01F", 0);
frontRotate("#table01B", 180);

function frontRotate(selector, num) {
  var n = 0 + num;
  (function animeLoop() {
    var requestAnime = window.requestAnimationFrame(animeLoop);
    var rotateDeg = n++;
    if (rotateDeg == 360) {
      n = 0;
    }
    if (rotateDeg >= 90 && rotateDeg <= 270) {
      $(selector).css("backface-visibility", "hidden");
    } else {
      $(selector).css("backface-visibility", "visible");
    }
    console.log(rotateDeg);
    $(selector).css("transform", "rotateY(" + rotateDeg + "deg)");
  })();
}

▲ 1(7)	▲ 16(22)
▲ 8(14)	▲ 9(15)

▲ 15(21)	▲ 2(8)
▲ 10(16)	▲ 7(13)

requestAnimationFrame()を使います。
cssのkeyframesやJavaScriptのsetinterval()では秒指定できますがrequestAnimationFrame()はできません。
しかし、requestAnimationFrame()はタブが非アクティブな状態などではブラウザがパフォーマンスを落とす仕組みになっており、メモリリークを避けることができます。
こちらの使用が推奨されています。

まとめ

CSSアニメーションには、今回は触れませんでしたがCSS Transitionというものもあります。
CSS、JavaScriptを使い分けてより良いサイトを作りましょう。

最後まで読んでくださりありがとうございました。