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

2020年5月22日システムJavaScript,プログラミング初心者

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

どうも、UT(@ut_1029)です。

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

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

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

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

JavaScriptrotate3dの値を変更して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~の解説

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

HTML部分

Jqueryを読み込む

JQueryCDN(Content Delivery Network)で読み込みます。

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

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

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方向へ移動

おわり

今回はJavaScriptrotate3dの値を変更してdiv要素を3D回転するサンプルコードを紹介&解説しました。3D回転するだけであればすごく簡単に実装することができます。

ぜひプログラミング実装などの参考にしてみてください。

プログラミング解説講座

UT
UTの日常

当ブログ(UTの日常)を運営しているUTは「プログラミング関係の仕事をしている30代1児の父親」です。詳しくは「UTのプロフィール」をご覧ください。

UTの日常では、システム開発における LinuxPHPJavaScriptJQueryMySQLなどの知識やプログラミング技術、サーバ構築や運用などAWSをメインに知識を紹介しています。

内容としては、Webシステムの開発中や運用中に発生したトラブルやエラーの対応や解決方法をまとめた備忘録やWebシステム開発の方法を未経験者の人を対象に説明したプログラム教科書を記事にしています。
Webシステム開発の知識やプログラム技術の備忘録