CSS3: transform-origin プロパティ - 2D変形，または，3D変形の原点

■ 概要

項　　目説　　明
記述形式
  1. セレクタ {transform-origin: 値 }
  2. セレクタ {transform-origin: 値1  値2 }
値 の形式
  • 値: 数値　（長さ，%） | left，center，right，top，bottom
  • 値1: 数値　（長さ，%） | left，center，right
  • 値2: 数値　（長さ，%） | top，center，bottom
初 期 値 50% 50%
対応ブラウザー C3+ / e?+ / N?+ / Fx?+ / Op?+ / Ch?+ / Sa?+
適用可能な要素 2D変形，または，3D変形の対象要素
継　　承 しない

■ 解説

transform-originプロパティ は，2D変形，または，3D変形の原点を指定します。

指定できる値の形式は，以下のとおりです。

値説　　明
数値
（長さ，%）		 要素境界の長方形の左上の点からのオフセットで指定します。
left 要素の左右境界の左端の位置に指定します。
center 要素の左右境界の中央の位置、または、
要素の上下境界の中央の位置に指定します。
right 要素の左右境界の右端の位置に指定します。
top 要素の上下境界の上端の位置に指定します。
bottom 要素の上下境界の下端の位置に指定します。

値を2つ指定した場合には，順に，左右方向と上下方向の位置になります。　値を１つのみ指定した場合には，もう１つの値は center（50%）になります。

■ 使用例（ transform-origin プロパティの利用）

現在準備中です。

■ 備考

【参考ページ】