JavaScript
 Computer >> コンピューター >  >> プログラミング >> JavaScript

JavaScriptで要素に2D・3D変換を適用する方法

JavaScriptのtransformプロパティとは

JavaScriptで要素に2Dまたは3D変換を適用するには、transformプロパティを使用します。このプロパティは、要素のstyleオブジェクト（element.style.transform）を通じて動的に設定でき、回転・拡大縮小・移動・傾斜など、さまざまな視覚効果を実現できます。

例えば、要素を60度回転させたい場合は値として「rotate(60deg)」を設定します。他にも用途に応じて複数の変換関数が用意されています。

主なtransform関数の一覧

  • rotate() … 要素を回転させる
  • scale() … 要素を拡大・縮小する
  • translate() … 要素を移動させる
  • skew() … 要素を傾斜させる
  • matrix() … 行列を指定して変換を定義する

サンプルコード

以下は、ボタンをクリックするとJavaScriptによって要素に2D変換（60度の回転）を適用する実装例です。

<!DOCTYPE html>
<html>
   <head>
      <style>
         #box {
            margin-left: 20px;
            border: 2px solid black;
            width: 300px;
            height: 250px;
            background-color: gray;
            color: white;
         }
      </style>
   </head>
   <body>
      <button onclick = "display()">Apply</button>

      <div id = "box"><p>Demo Text</p></div>

      <script>
         function display() {
            document.getElementById("box").style.transform = "rotate(60deg)";
         }
      </script>
   </body>
</html>

コードの解説

このサンプルでは、「Apply」ボタンをクリックするとdisplay()関数が呼び出されます。関数内では、document.getElementById("box")でid属性が「box」のdiv要素を取得し、そのstyle.transformに「rotate(60deg)」を代入しています。その結果、グレーのボックスが中心を軸に60度回転します。

なお、3D変換を適用したい場合は、「rotateX()」「rotateY()」「translateZ()」などの3D対応の関数を使用します。また、変化を滑らかに見せたい場合は、CSSのtransitionプロパティと組み合わせると効果的です。

  1. JavaScriptで要素が非表示になっているかどうかを確認する方法

    Webページの開発では、特定の要素が現在非表示になっているかどうか（display: none が適用されているか）を判定したい場面がよくあります。JavaScriptでこれを実現するには、window.getComputedStyle() メソッドを使うのが一般的です。このメソッドは、CSSスタイルシートで設定された実際の表示状態を取得できるため、確実に非表示状態をチェックできます。 実装例 以下は、ボタンをクリックすると非表示になっているDIV要素を表示するサンプルコードです。クリック時には、まず getComputedStyle() で要素が「none」になっているかどうかを確認してから

  2. CSSのtransformプロパティで要素に2D・3D変換を適用する方法

    CSSでは、transformプロパティを使うことで、HTML要素に2Dまたは3Dの変換（トランスフォーム）を簡単に適用できます。回転、移動、拡大縮小、傾斜など、さまざまな視覚効果をJavaScriptに頼らず純粋なCSSだけで実現できるのが大きな魅力です。 transformプロパティの基本的な使い方 最もシンプルな例として、rotate()関数を使って要素を回転させる方法を見てみましょう。以下のコードでは、グレーのdiv要素が時計回りに10度回転して表示されます。 サンプルコード <!DOCTYPE html> <html> <head> <sty