CSS3 transform-origin プロパティ

❮ 前章へ 完全な CSS リファレンス 次へ ❯

回転要素の原点を設定します:

div {
    -ms-transform: rotate(45deg); /* IE 9 */
    -ms-transform-origin: 20% 40%; /* IE 9 */
    -webkit-transform: rotate(45deg); /* Chrome, Safari, Opera */
    -webkit-transform-origin: 20% 40%; /* Chrome, Safari, Opera */
    transform: rotate(45deg);
    transform-origin: 20% 40%;
}
Try it Yourself ❯

定義と用法

transform-origin プロパティは、変形する要素の位置を変更することを可能にします。

2D 変形は、要素の x 軸と y 軸を変更することができます。 3D 変形は、要素の z 軸も変更することができます。

プロパティをより深く理解するために、 デモをご覧ください

注: このプロパティは、transform プロパティと 一緒に使用しなければなりません。

チップ: 3D transforms のこのプロパティをより深く理解するために、 デモをご覧ください

デフォルト値: 50% 50% 0
継承: 継承する
アニメーション可否: 可。animatable を参照 Try it
バージョン: CSS3
JavaScript 構文: object.style.transformOrigin="0 0" Try it

ブラウザ・サポート

表中の数字は、完全にプロパティをサポートした最初のブラウザのバージョンです。

-webkit-、-moz-、-o- の後に続く数字は、接頭辞付きで動作した最初のバージョンです。

プロパティ
transform-origin
(two-value syntax)
36.0
4.0 -webkit-
10.0
9.0 -ms-
16.0
3.5 -moz-
9.0
3.2 -webkit-
23.0
15.0 -webkit-
10.5 -o-
transform-origin
(three-value syntax)
36.0
12.0 -webkit-
10.0 16.0
10.0 -moz-
9.0
4.0 -webkit-
23.0
15.0 -webkit-

CSS 構文

transform-origin: x-axis y-axis z-axis|initial|inherit;

プロパティの値

プロパティ値 説明
x-axis x 軸に配置されたビューの位置を定義します。指定可能な値:
  • left
  • center
  • right
  • length
  • %
y-axis y 軸に配置されたビューの位置を定義します。指定可能な値:
  • top
  • center
  • bottom
  • length
  • %
z-axis z 軸に配置されたビューの位置を定義します(3D 変形用)。指定可能な値:
  • length
  • initial プロパティにデフォルト値を設定します。initial を参照
    inherit このプロパティは親要素を継承します。inherit を参照

    関連ページ

    CSS チュートリアル: CSS 2D Transforms

    CSS チュートリアル: CSS 3D Transforms

    HTML DOM リファレンス:transformOrigin プロパティ


    ❮ 前章へ 完全な CSS リファレンス 次へ ❯