これは実験段階の機能です。
この機能は複数のブラウザで開発中の状態にあります。各ブラウザで用いるために、適切なベンダー接頭辞が必要な場合があります。互換性テーブルをチェックしてください。また、実験段階の機能の構文と挙動は、仕様変更に伴い各ブラウザの将来のバージョンで変更になる可能性があることに注意してください。
概要
transform CSS プロパティは CSS 視覚整形モデルの座標空間を変更できるようにします。これを用いると、要素を移動、回転、スケーリング、傾斜させることができます。
構文
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] と同じです。
<length> 値を受け付けます。現在の Gecko、Webkit（Safari、Chrome）、Opera は、 tx と ty として単位の無い <数量> をサポートします。実働例
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);
参照
- Examples of linear transformation matrices Wikipedia
- Coordinate transformation matrices mathamazement.com
- Microsoft's matrix filter MSDN
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 で互換性の理由から再導入しました。これは非標準で将来的におそらく取り除かれるので、使わないでください。
関連情報
- CSS Transforms の利用
- <translation-value> データ型
- transform 関連 CSS プロパティ :
backface-visibility、perspective、perspective-origin、transform、transform-origin、transform-style - More info on CSS3 Rotation / Matrix Filter issues in the comments on Paul Irish's blog.
- クロスブラウザな 2D の transform plugin for jQuery
CSS transforms の利用backface-visibilityperspectiveperspective-origintransformtransform-origintransform-style- CSS リファレンス
- A
- B
backface-visibilitybackgroundbackground-attachmentbackground-blend-modebackground-clipbackground-colorbackground-imagebackground-originbackground-positionbackground-repeatbackground-size::before (:before)<blend-mode>blur()borderborder-bottomborder-bottom-colorborder-bottom-left-radiusborder-bottom-right-radiusborder-bottom-styleborder-bottom-widthborder-collapseborder-colorborder-imageborder-image-outsetborder-image-repeatborder-image-sliceborder-image-sourceborder-image-widthborder-leftborder-left-colorborder-left-styleborder-left-widthborder-radiusborder-rightborder-right-colorborder-right-styleborder-right-widthborder-spacingborder-styleborder-topborder-top-colorborder-top-left-radiusborder-top-right-radiusborder-top-styleborder-top-widthborder-widthbottombox-decoration-breakbox-shadowbox-sizingbreak-afterbreak-beforebreak-insidebrightness()
- C
calc()caption-sidech@charset:checked::choicesclearclipclip-pathcmcolor<color>columnscolumn-countcolumn-fillcolumn-gapcolumn-rulecolumn-rule-colorcolumn-rule-stylecolumn-rule-widthcolumn-spancolumn-widthcontentcontrast()<カウンタ>counter-incrementcounter-reset@counter-stylecross-fade()cubic-bezier()cursor<custom-ident>cycle()
- D
- E
- F
filter:first:first-child::first-letter (:first-letter)::first-line (:first-line):first-of-typeflexflex-basisflex-directionflex-flowflex-growflex-shrinkflex-wrapfloat:focusfont@font-facefont-familyfont-feature-settings@font-feature-valuesfont-kerningfont-language-overridefont-sizefont-size-adjustfont-stretchfont-stylefont-synthesisfont-variantfont-variant-alternatesfont-variant-capsfont-variant-east-asianfont-variant-ligaturesfont-variant-numericfont-variant-positionfont-weight<周波数>:fullscreen
- G
- H
- I
- J
- K
- L
- M
- N
- O
- P
- Q
- R
- S
ssaturate()scale()scalex()scaley()scalez()scale3d():scope::selectionsepia()<形状>skew()skewx()skewy()steps()<文字列>@supports
table-layouttab-size:targettext-aligntext-align-lasttext-combine-horizontaltext-decorationtext-decoration-colortext-decoration-linetext-decoration-styletext-indenttext-orientationtext-overflowtext-renderingtext-shadowtext-transformtext-underline-position<時間><タイミング関数>toptouch-actiontransformtransform-origintransform-styletransitiontransition-delaytransition-durationtransition-propertytransition-timing-functiontranslate()translatex()translatey()translatez()translate3d()turn
- U
- V
- W
- X Y Z
これは実験段階の機能です。
この機能は複数のブラウザで開発中の状態にあります。各ブラウザで用いるために、適切なベンダー接頭辞が必要な場合があります。互換性テーブルをチェックしてください。また、実験段階の機能の構文と挙動は、仕様変更に伴い各ブラウザの将来のバージョンで変更になる可能性があることに注意してください。
概要
transform CSS プロパティは CSS 視覚整形モデルの座標空間を変更できるようにします。これを用いると、要素を移動、回転、スケーリング、傾斜させることができます。
構文
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] と同じです。
<length> 値を受け付けます。現在の Gecko、Webkit（Safari、Chrome）、Opera は、 tx と ty として単位の無い <数量> をサポートします。実働例
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);
参照
- Examples of linear transformation matrices Wikipedia
- Coordinate transformation matrices mathamazement.com
- Microsoft's matrix filter MSDN
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 で互換性の理由から再導入しました。これは非標準で将来的におそらく取り除かれるので、使わないでください。
関連情報
- CSS Transforms の利用
- <translation-value> データ型
- transform 関連 CSS プロパティ :
backface-visibility、perspective、perspective-origin、transform、transform-origin、transform-style - More info on CSS3 Rotation / Matrix Filter issues in the comments on Paul Irish's blog.
- クロスブラウザな 2D の transform plugin for jQuery