😉

VanillaJS＋CSSで画像を3D回転させる方法

2021/12/07に公開

CSS

JavaScript

3d回転

tech

こんにちは、今日は前々からやりたいなと思っていた画像の3D回転が出来たのでご紹介いたします。（とても嬉しいですw）

rotation3D.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>JavaScript Test</title>
  </head>
  <body>
    <h2>tranformで3D回転する</h2>
    <img alt="" src="./test.jpg" id="rotated"/>
    
    <script type="text/javascript">
    <!--
    //TICKの時間毎に処理を更新(TICKはミリ秒)
    let TICK = 10;
    //degは回転角
    let deg = 0;
    let image = document.getElementById("rotated");

    //唯一の関数定義
    let mainLoop = function(){
      
      //ここが肝、img要素のcss:transformプロパティにrotate3Dの値を入れている
      image.style.transform = "rotate3d(1, 1, 1, "+ deg +"deg)";
      
      //一ステップ毎に増やす回転角deg
      deg += 2;  
      
      //繰り返し実行の為の再帰呼び出し
      setTimeout(mainLoop, TICK);
    }

    window.onload = function(){
      //実行部分
      mainLoop();
    }
    //-->
    </script>
  </body>
</html>

上のrotation3D.htmlをお好きな画像をtest.jpgと言う名前で保存して、
同じフォルダに入れてrotation3D.htmlをクロームなどで開いてみてください。

ポイントとしては３つですかね。

１．mainLoop関数は再帰です。これで無限に動作を繰り返します。

２．mainLoop関数の繰り返し動作の中で回転角パラメータdegを増やしていく。

３．下のコードで画像のtransformプロパティにrotate3d値をセットする。
回転軸は(x,y,z)=(1,1,1)になっています。（回転軸ベクトルは自動的に正規化されるそうです）

image.style.transform = "rotate3d(1, 1, 1, "+ deg +"deg)";

参考URL

Discussion