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

CSSのtransform-originプロパティの使い方を解説！変形の基準点を変更する方法

transform-originプロパティとは？

CSSのtransform-originプロパティを使うと、transformで変形（回転・拡大縮小・傾斜など）される要素の基準点（原点）を自由に変更できます。

デフォルトでは要素の中央（50% 50%）が基準点に設定されていますが、このプロパティを指定することで、回転やスケール変換の起点を要素の任意の位置に移動させることが可能です。

値の指定方法は主に以下のとおりです。

  • キーワード： top、bottom、left、right、center など
  • パーセンテージ： 30% 40% のように要素のサイズに対する割合で指定
  • 長さ（px、em など）： 要素の左上から の距離で指定
  • 3つ目の値： Z軸方向のオフセットを指定することで、3D変形にも対応

サンプルコード

以下のコードを実行すると、transform-originプロパティの動作を実際に確認できます。青いボックスが基準点「30% 40%」を起点に10度回転します。

<!DOCTYPE html>
<html>
   <head>
      <style>
         .demo1 {
            width: 300px;
            height: 300px;
            background-color: yellow;
         }
         .demo2 {
            width: 200px;
            height: 200px;
            background-color: orange;
         }
         .demo3 {
            width: 100px;
            height: 100px;
            background-color: blue;
            transform: rotate(10deg);
            transform-origin: 30% 40%;
         }
      </style>
   </head>
   <body>
      <h1>回転のデモ</h1>
      <div class = "demo1">Demo
         <div class = "demo2">Demo
            <div class = "demo3">
               Demo
            </div>
         </div>
      </div>
   </body>
</html>

実行結果のポイント

このサンプルでは、3重にネストしたdiv要素を用意しています。一番内側の青いボックス（.demo3）にtransform: rotate(10deg)を指定し、さらにtransform-origin: 30% 40%とすることで、要素の左上からX方向に30%、Y方向に40%の位置を基準に回転します。

基準点の指定を変えたり、値を削除してデフォルト（中央）と比較したりすると、transform-originが変形の見え方に大きく影響することが理解できるでしょう。アニメーションと組み合わせれば、より自然で表現力豊かな動きを実現できます。

  1. CSSのtransformプロパティで要素を変形させる方法

    CSSのtransformプロパティは、要素に対して2Dまたは3Dの変形を適用するために使用されます。回転（rotate）、拡大縮小（scale）、移動（translate）、傾斜（skew）などの変換を組み合わせることで、静的なページに動きや立体感を加え、より視覚的に魅力的なデザインを実現できます。 transformプロパティの基本的な使い方 transformプロパティには、主に以下のような変換関数を指定できます。 rotate()：要素を指定した角度で回転させます scale()：要素のサイズを拡大・縮小します translate()：要素をX軸・Y軸方向に移動させます skew()

  2. CSSでtransform-originプロパティをアニメーションさせる方法

    CSSでは、transform-originプロパティも他のプロパティと同様に、@keyframesルールを使ってアニメーションさせることができます。transform-originは、要素が回転や拡大縮小を行う際の基準点(原点)を指定するプロパティです。デフォルトでは要素の中心が基準点になりますが、この位置をアニメーションで変化させることで、回転しながら軸が移動していくようなダイナミックな演出を実現できます。実装例以下のコードは、オレンジ色のボックスを45度回転させた状態で、transform-originを「30% 10%」から「0 0」へと3秒かけて連続的に変化させる例です。<!D