JavaScriptで要素を3D回転・移動するプログラムを解説【rotate3d】

2020年5月22日2022年10月26日プログラムJavaScript,プログラムサンプル

【サンプルコード】JavaScriptで要素を3D回転・移動～rotate3d～

JavaScriptで要素を3D回転と移動する例を紹介します。今回はCSSのスタイルで使われるrotate3dの値をJavaScriptで変更してdiv要素を3D回転と移動するサンプルコードを解説します。

3D回転と聞くと難しそうですが、rotate3dですごく簡単に実装出来ます。

JavaScriptで要素を上下左右に移動〜translate〜

Contents

1. JavaScriptで要素を3D回転・移動～rotate3d～のサンプルコード
2. JavaScriptで要素を3D回転～rotate3d～の解説
- 2.1. HTML部分
- 2.2. JavaScript部分
3. おわり

JavaScriptで要素を3D回転・移動～rotate3d～のサンプルコード

JavaScriptでrotate3dの値を変更してdiv要素を3D回転と移動するサンプルコードを紹介します。

<html>
<head>
    <meta charset="utf-8">
    <title>rotate3d Sample</title>
    <style>
        body {
            text-align: center;
        }
        .square {
            width: 100px;
            height: 100px;
            margin: 30px auto;
            background-color: #000;
        }
        .square span {
            color: #fff;
        }
    </style>
</head>
<body>
    <h1>rotate3d Sample</h1>
    <div class="square x-rotate3d"><span>rotate3d(X)</span></div>
    <div class="square y-rotate3d"><span>rotate3d(Y)</span></div>
    <div class="square z-rotate3d"><span>rotate3d(Z)</span></div>
    <div class="square x-translate"><span>translate(X)</span></div>
    <div class="square y-translate"><span>translate(Y)</span></div>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script>
        $(document).ready(function () {
            var i = 0;
            setInterval(function () {
                i++;
                $('.x-rotate3d').prop("style", "transform: rotate3d(1, 0, 0, " + i + "deg)");
                $('.y-rotate3d').prop("style", "transform: rotate3d(0, 1, 0, " + i + "deg)");
                $('.z-rotate3d').prop("style", "transform: rotate3d(0, 0, 1, " + i + "deg)");
                $('.x-translate').prop("style", "transform: translate(" + i + "px,0px)");
                $('.y-translate').prop("style", "transform: translate(0px," + i + "px)");
            }, 50);
        });
    </script>
</body>
</html>

JavaScriptで要素を3D回転～rotate3d～の解説

JavaScriptでrotate3dの値を変更してdiv要素を3D回転と移動するサンプルコードの解説をします。

HTML部分

Jqueryを読み込む

JQueryをCDN(Content Delivery Network)で読み込みます。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

CDNとは

Content Delivery Networkの略です。
簡単に言うと、リソース(CSSやJQueryなど)を自サーバへ用意せず、外部サーバから取得する仕組みです。
※リソースを配信する外部サーバは、最適化されたネットワークでリソースを配信します。

divタグで要素を作成

divタグで要素を3つ用意します。

<div class="square x-rotate3d"><span>rotate3d(X)</span></div>
<div class="square y-rotate3d"><span>rotate3d(Y)</span></div>
<div class="square z-rotate3d"><span>rotate3d(Z)</span></div>
<div class="square x-translate"><span>translate(X)</span></div>
<div class="square y-translate"><span>translate(Y)</span></div>

class="x-rotate3d"
- X方向へ回転する要素。
class="y-rotate3d"
- Y方向へ回転する要素。
class="z-rotate3d"
- Z方向へ回転する要素。
class="x-translate"
- X方向へ移動する要素。
class="y-translate"
- Y方向へ移動する要素。

JavaScript部分

次にJavaScript部分の解説をします。

読み込み完了で実行させる

読み込み完了時に実行するように「$(document).ready();」と定義します。

$(document).ready(function () {
});

rotate3dの値を変更

setinterval()で50ミリ秒毎にrotate3dの値を変更してdiv要素を3D回転させます。
変数のiを実行する度に+1してdiv用を変形させています。

var i = 0;
setInterval(function () {
    i++;
    $('.x-rotate3d').prop("style", "transform: rotate3d(1, 0, 0, " + i + "deg)");
    $('.y-rotate3d').prop("style", "transform: rotate3d(0, 1, 0, " + i + "deg)");
    $('.z-rotate3d').prop("style", "transform: rotate3d(0, 0, 1, " + i + "deg)");
    $('.x-translate').prop("style", "transform: translate(" + i + "px,0px)");
    $('.y-translate').prop("style", "transform: translate(0px," + i + "px)");
}, 50);

setInterval：指定秒毎に処理を実行
- 第1引数：実行する処理
- 第2引数：実行する秒数(ミリ秒)

transform：指定要素を回転、縮尺、傾斜など変形を適用
- rotate3d：回転
  - 第1引数：X方向へ回転(0,1)
  - 第2引数：Y方向へ回転(0,1)
  - 第3引数：Z方向へ回転(0,1)
  - 第4引数：回転する角度
- translate：移動
  - 第1引数：X方向へ移動
  - 第2引数：Y方向へ移動