mozilla
Your Search Results

    transform

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

    概要

    transform CSS プロパティは CSS 視覚整形モデルの座標空間を変更できるようにします。これを用いると、要素を移動、回転、スケーリング、傾斜させることができます。

    • 初期値 none
    • 適用対象 変形可能要素
    • 継承 継承しない
    • 相対値の基準 refer to the size of bounding box
    • メディア visual
    • 計算値 as specified, but with relative lengths converted into absolute lengths
    • アニメーションの可否 可。transform の値として補完します。
    • 正規順序 形式文法で定義される一意のあいまいでない順序

    構文

    transform:  <transform-function>+ | none
    

    <transform-function>
    1 個以上の CSS transform functions。下記参照。
    none
    transform は何も適用されないことを示す。

    CSS transforms の利用 を参照。

    実働例

    pre {
      width: 33em;
      border: solid red;
    
      -webkit-transform: translate(100px) rotate(10deg);
      -webkit-transform-origin: 60% 100%;
    
      -o-transform: translate(100px) rotate(10deg);
      -o-transform-origin: 60% 100%;
    
      transform: translate(100px) rotate(10deg);
      transform-origin: 60% 100%;
    }
    

    CSS 変換関数

    transform CSS プロパティは要素で使用される座標システムを transform 関数 を用いて操作できるようにします。これらの関数は以下に記述されています。

    matrix(行列)

    transform:  matrix(a, c, b, d, tx, ty)
    
    /* a, b, c, d は変換行列を構成します 
       ┌     ┐ 
       │ a b │
       │ c d │
       └     ┘
       tx, ty は移動量です(translate values)  */
    

    6 値からなる 2D 変換行列を指定します。これは matrix [a b c d tx ty] と同じです。

    注記:  古いバージョンの Gecko (Firefox) は txty として <length> 値を受け付けます。現在の Gecko、Webkit(Safari、Chrome)、Opera は、 txty として単位の無い <数量> をサポートします。

    実働例

     background: gold;  width: 30em;
    
     -webkit-transform: matrix(1, -0.2, 0, 1, 0, 0);
          -o-transform: matrix(1, -0.2, 0, 1, 0, 0);
             transform: matrix(1, -0.2, 0, 1, 0, 0);
    
    background: wheat;
    max-width: intrinsic;  max-width: -moz-fit-content;
    
    -webkit-transform: matrix(1, 0, 0.6, 1,  250, 0);
         -o-transform: matrix(1, 0, 0.6, 1,  250, 0);
            transform: matrix(1, 0, 0.6, 1,  250, 0);
    

    参照

    rotate(回転)

    transform:  rotate(angle);      /* an <角度>, e.g.  rotate(30deg) */

    要素をその原点(-moz-transform-origin で指定)を中心に時計回りに指定された angle だけ回転させます。この操作は matrix [cos(angle) sin(angle) -sin(angle) cos(angle) 0 0] に対応します。

    scale(スケーリング)

    transform:  scale(sx[, sy]);     /* one or two unitless <数量>s, e.g.  scale(2.1,4) */

    [sx, sy] で記述される 2D スケーリング操作を指定します。sy が指定されていない場合は、sx と同じであるとみなされます。

    scaleX

    transform:  scaleX(sx);          /* a unitless <数量>, e.g.  scaleX(2.7) */

    vector [sx, 1] を用いたスケーリングを指定します。

    scaleY

    transform:  scaleY(sy)           /* a unitless <数量>, e.g.  scaleY(0.3) */

    vector [1, sy] を用いたスケーリングを指定します。

    skew(傾斜)

    transform:  skew(ax[, ay])       /* one or two <角度>, e.g.  skew(30deg,-10deg) */

    要素を X 軸または Y 軸に対して指定された角度だけ傾斜させます。ay が指定されていない場合は、Y 軸に対しては傾斜は適用されません。

    注記: skew() 関数は初期の草案に存在しました。この関数は取り除かれましたが、一部の実装にはまだ残されています。これは使わないでください。

    同じ効果を得るために、skew() に1 つの引数を与えて使っていたのなら skewX() を、汎用的には matrix(1, tan(ay), tan(ax), 1, 0, 0) を使ってください。ここで tan() は CSS 関数ではなく、自分で計算する必要がある点に注意してください。

    skewX

    transform:  skewX(angle)         /* an <角度>, e.g.  skewX(-30deg) */

    要素を X 軸に対して指定された angle だけ傾斜させます。

    skewY

    transform:  skewY(angle)         /* an <角度>, e.g.  skewY(4deg) */

    要素を Y 軸に対して指定された angle だけ傾斜させます。

    translate(移動)

    transform:  translate(tx[, ty])  /* one or two <length> values */

    vector [tx, ty] による 2D 移動を指定します。ty が指定されていない場合は、値は0とみなされます。

    <translation-value> 引数は <length> 値か <percentage> 値のいずれかです。

    translateX

    transform:  translateX(tx)       /* see <length> for possible values */

    要素を X 軸にそって指定量だけ移動します。

    translateY

    transform:  translateY(ty)       /* see <length> for possible values */

    要素を Y 軸にそって指定量だけ移動します。

    仕様

    仕様 策定状況 コメント
    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
    3D のサポート 12.0-webkit 10.0-moz
    16.0 (16.0)
    10.0 未サポート 4.0-webkit
    機能 Android Chrome for Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
    基本サポート ? ? ? ? ? ?

    注記

    Internet Explorer 5.5 以降はプロプライエタリな Matrix Filter を使って同様の効果を得ることができます。

    Gecko 14.0 は skew()の実験的なサポートを取り除きましたが、Gecko 15.0 で互換性の理由から再導入しました。これは非標準で将来的におそらく取り除かれるので、使わないでください。

    関連情報

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

    概要

    transform CSS プロパティは CSS 視覚整形モデルの座標空間を変更できるようにします。これを用いると、要素を移動、回転、スケーリング、傾斜させることができます。

    • 初期値 none
    • 適用対象 変形可能要素
    • 継承 継承しない
    • 相対値の基準 refer to the size of bounding box
    • メディア visual
    • 計算値 as specified, but with relative lengths converted into absolute lengths
    • アニメーションの可否 可。transform の値として補完します。
    • 正規順序 形式文法で定義される一意のあいまいでない順序

    構文

    transform:  <transform-function>+ | none
    

    <transform-function>
    1個以上の CSS transform functions。下記参照。
    none
    transform は何も適用されないことを示す。

    CSS transforms の利用 を参照。

    実働例

    pre {
      width: 33em;
      border: solid red;
    
      -webkit-transform: translate(100px) rotate(10deg);
      -webkit-transform-origin: 60% 100%;
    
      -o-transform: translate(100px) rotate(10deg);
      -o-transform-origin: 60% 100%;
    
      transform: translate(100px) rotate(10deg);
      transform-origin: 60% 100%;
    }
    

    CSS 変換関数

    transform CSS プロパティは要素で使用される座標システムを transform 関数 を用いて操作できるようにします。これらの関数は以下に記述されています。

    matrix(行列)

    transform:  matrix(a, c, b, d, tx, ty)
    
    /* a, b, c, d は変換行列を構成します 
       ┌     ┐ 
       │ a b │
       │ c d │
       └     ┘
       tx, ty は移動量です(translate values)  */
    

    6 値からなる 2D 変換行列を指定します。これは matrix [a b c d tx ty] と同じです。

    注記:  古いバージョンの Gecko (Firefox) は txty として <length> 値を受け付けます。現在の Gecko、Webkit(Safari、Chrome)、Opera は、 txty として単位の無い <数量> をサポートします。

    実働例

     background: gold;  width: 30em;
    
     -webkit-transform: matrix(1, -0.2, 0, 1, 0, 0);
          -o-transform: matrix(1, -0.2, 0, 1, 0, 0);
             transform: matrix(1, -0.2, 0, 1, 0, 0);
    
    background: wheat;
    max-width: intrinsic;  max-width: -moz-fit-content;
    
    -webkit-transform: matrix(1, 0, 0.6, 1,  250, 0);
         -o-transform: matrix(1, 0, 0.6, 1,  250, 0);
            transform: matrix(1, 0, 0.6, 1,  250, 0);
    

    参照

    rotate(回転)

    transform:  rotate(angle);      /* an <角度>, e.g.  rotate(30deg) */

    要素をその原点(-moz-transform-origin で指定)を中心に時計回りに指定された angle だけ回転させます。この操作は matrix [cos(angle) sin(angle) -sin(angle) cos(angle) 0 0] に対応します。

    scale(スケーリング)

    transform:  scale(sx[, sy]);     /* one or two unitless <数量>s, e.g.  scale(2.1,4) */

    [sx, sy] で記述される 2D スケーリング操作を指定します。sy が指定されていない場合は、sx と同じであるとみなされます。

    scaleX

    transform:  scaleX(sx);          /* a unitless <数量>, e.g.  scaleX(2.7) */

    vector [sx, 1] を用いたスケーリングを指定します。

    scaleY

    transform:  scaleY(sy)           /* a unitless <数量>, e.g.  scaleY(0.3) */

    vector [1, sy] を用いたスケーリングを指定します。

    skew(傾斜)

    transform:  skew(ax[, ay])       /* one or two <角度>, e.g.  skew(30deg,-10deg) */

    要素を X 軸または Y 軸に対して指定された角度だけ傾斜させます。ay が指定されていない場合は、Y 軸に対しては傾斜は適用されません。

    注記: skew() 関数は初期の草案に存在しました。この関数は取り除かれましたが、一部の実装にはまだ残されています。これは使わないでください。

    同じ効果を得るために、skew() に1 つの引数を与えて使っていたのなら skewX() を、汎用的には matrix(1, tan(ay), tan(ax), 1, 0, 0) を使ってください。ここで tan() は CSS 関数ではなく、自分で計算する必要がある点に注意してください。

    skewX

    transform:  skewX(angle)         /* an <角度>, e.g.  skewX(-30deg) */

    要素を X 軸に対して指定された angle だけ傾斜させます。

    skewY

    transform:  skewY(angle)         /* an <角度>, e.g.  skewY(4deg) */

    要素を Y 軸に対して指定された angle だけ傾斜させます。

    translate(移動)

    transform:  translate(tx[, ty])  /* one or two <length> values */

    vector [tx, ty] による 2D 移動を指定します。ty が指定されていない場合は、値は0とみなされます。

    <translation-value> 引数は <length> 値か <percentage> 値のいずれかです。

    translateX

    transform:  translateX(tx)       /* see <length> for possible values */

    要素を X 軸にそって指定量だけ移動します。

    translateY

    transform:  translateY(ty)       /* see <length> for possible values */

    要素を Y 軸にそって指定量だけ移動します。

    仕様

    仕様 策定状況 コメント
    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
    3D のサポート 12.0-webkit 10.0-moz
    16.0 (16.0)
    10.0 未サポート 4.0-webkit
    機能 Android Chrome for Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
    基本サポート ? ? ? ? ? ?

    注記

    Internet Explorer 5.5 以降はプロプライエタリな Matrix Filter を使って同様の効果を得ることができます。

    Gecko 14.0 は skew()の実験的なサポートを取り除きましたが、Gecko 15.0 で互換性の理由から再導入しました。これは非標準で将来的におそらく取り除かれるので、使わないでください。

    関連情報

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

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