mozilla
Your Search Results

    transform-origin

    これは実験段階の機能です。
    この機能は複数のブラウザで開発中の状態にあります。各ブラウザで用いるために、適切なベンダー接頭辞が必要な場合があります。互換性テーブルをチェックしてください。また、実験段階の機能の構文と挙動は、仕様変更に伴い各ブラウザの将来のバージョンで変更になる可能性があることに注意してください。

    概要

    CSS の transform-origin プロパティは要素の原点を決めます。例えば、rotate() 関数は transform-origin を中心にして回転します。(このプロパティは、最初にプロパティの負値によって要素を平行移動 (translate)し、次に要素を変換 (transform)し、最後にプロパティの値によって平行移動して適用されます。)

    明示的にセットされていない値は、対応する値にリセットされることに注意してください。

    • 初期値50% 50% 0
    • 適用対象transform 可能要素
    • 継承しない
    • 相対値の基準bounding box のサイズ
    • メディアvisual
    • 計算値絶対的な length または percentage
    • アニメーションの可否

    構文

    形式文法: [ <percentage> | <length> | left | center | right | top | bottom] | [ [ <percentage> | <length> | left | center | right ] && [ <percentage> | <length> | top | center | bottom ] ] <length>?
    
    transform-origin: x-offset                                   /* 1-値構文 */   E.g.  transform-origin: 2px 
    transform-origin: offset-keyword                                             E.g.  transform-origin: bottom
    
    transform-origin: x-offset y-offset                          /* 2-値構文 */   E.g.  transform-origin: 3cm 2px
    transform-origin: y-offset x-offset-keyword                                  E.g.  transform-origin: 2px left
    transform-origin: x-offset-keyword y-offset                                  E.g.  transform-origin: left 2px
    transform-origin: x-offset-keyword y-offset-keyword                          E.g.  transform-origin: right top
    transform-origin: y-offset-keyword x-offset-keyword                          E.g.  transform-origin: top right
    
    transform-origin: x-offset y-offset z-offset                 /* 3-値構文 */   E.g.  transform-origin: 2px 30% 10px
    transform-origin: y-offset x-offset-keyword z-offset                         E.g.  transform-origin: 2px left 10px
    transform-origin: x-offset-keyword y-offset z-offset                         E.g.  transform-origin: left 5px -3px
    transform-origin: x-offset-keyword y-offset-keyword z-offset                 E.g.  transform-origin: right bottom 2cm
    transform-origin: y-offset-keyword x-offset-keyword z-offset                 E.g.  transform-origin: bottom right 2cm
    

    x-offset
    <length> または <割合> の、ボックスの左端から変換の原点までの距離を示す値です。
    offset-keyword
    left, right, top, bottom, center のいずれかのキーワードで、対応するオフセットを表します。
    y-offset
    <length> または <割合> の、ボックスの右端から変換の原点までの距離を示す値です。
    x-offset-keyword
    left, right, center のいずれかのキーワードで、ボックスの左端から変換の原点までの距離を示します。
    y-offset-keyword
    top, bottom, center のいずれかのキーワードで、ボックスの上端から変換の原点までの距離を示します。
    z-offset
    <length> 値 ( <割合> は無効です) で、ユーザーの目と z=0 原点の距離を示します。

    キーワードは便利な略記で、次の <割合> 値に相当します:

    キーワード
    left 0%
    center 50%
    right 100%
    top 0%
    bottom 100%

    CSS transforms の利用 をご覧ください。

    実動例

    transform: none;
     
    transform: rotate(30deg);
     
    transform: rotate(30deg);
    transform-origin: 0 0;
     
    transform: rotate(30deg);
    transform-origin: 100% 100%;
     
    transform: rotate(30deg);
    transform-origin: -10em -30em;
     
    transform: scale(1.9);
     
    transform: scale(1.9);
    transform-origin: 0 0;
     
    transform: scale(1.9);
    transform-origin: 100% -30%;
     
    transform: skewX(50deg);
     
    transform: skewY(50deg);
    transform-origin: 0 0;
     

    解説:値

    3個までの値。

    • 1-値構文は基本的に水平位置を指定し、垂直位置は 50% となります。
    • 2-値構文は基本的に1個目が水平、2個目が垂直位置を指定します。
    • 3-値構文は基本的に1個目が水平、2個目が垂直、3個目が奥行き方向を指定します。

    ※以下の記述は 1-値構文または 2-値構文に関するものです

    キーワード、<length><割合> との組み合わせは許されますが、もしキーワードがほかの値と混在して使用された場合は left right は1番目の値として、top bottom は2番目の値としてだけ使用されます。負の位置も許可されています。

    <percentage>
    0% 0%、(または単に 0 0)の場合、transform-origin はボックスの左上コーナーとなります。100% 100% は transform-origin を右下コーナーに設定します。14% 84% はボックスの右に 14%、下に 84% の位置に transform-origin を設定します。
    <length>
    2cm 1cm の場合、transform-origin は要素の左上から右に 2cm、下に 1cm の位置です。
    top left | left top
    0 0 と同じです。
    top | top center | center top
    50% 0 と同じです。
    right top | top right
    100% 0 と同じです。
    left | left center | center left
    0 50% と同じです。
    center | center center
    50% 50% と同じです(デフォルト値)。
    right | right center | center right
    100% 50% と同じです。
    bottom left | left bottom
    0 100% と同じです。
    bottom | bottom center | center bottom
    50% 100% と同じです。
    bottom right | right bottom
    100% 100% と同じです。

    仕様

    仕様書 策定状況 コメント
    CSS Transforms Level 1 草案  

    ブラウザ実装状況

    機能 Chrome Firefox (Gecko) Internet Explorer Opera Safari
    基本サポート (有) -webkit 3.5 (1.9.1)-moz
    16.0 (16.0)
    9.0-ms
    10.0
    10.5-o
    12.10
    3.1-webkit
    3-値構文 (有) -webkit 10 (10)-moz
    16.0 (16.0)
    10.0 未サポート (有) -webkit
    機能 Android Chrome for Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
    基本サポート ? ? ? ? ? ?
    3-値構文 ? ? ? ? 未サポート ?
    : Internet Explorer 5.5 以降はプロプライエタリな Matrix Filter をサポートしており、これを使うと同様の効果を実現できます。

    関連情報

    ドキュメントのタグと貢献者

    Contributors to this page: Level, sosleepy, ethertank, FredB
    最終更新者: ethertank,
    サイドバーを隠す