投稿日: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を使い分けてより良いサイトを作りましょう。
 
最後まで読んでくださりありがとうございました。
 

関連記事


 

Pocket