CSS 参考手帳

CSS @規則(RULES)

CSS 属性全書

CSS3 transform 属性使用方法及示例

transform CSS属性应用于元素的2D或3D转换。这个属性允许你将元素旋转，缩放，移动，倾斜，平移，旋转，缩放等在二维或三维空间等。

下表为此属性的用法说明和版本历史记录，以及该属性在javascript脚本中的使用语法。

默认值：	none
适用于：	可变形元素
继承：	没有
可动画制作：	是。请参考动画属性。
版本：	CSS3的新功能
JavaScript语法：	object.style.transform="rotate(7deg)"

transform的使用语法

该属性的语法如下：

transform:　[　transform-function　]　1　or　more　values　|　none　|　initial　|　inherit

下面的示例演示了如何使用transform属性。

示例

img　{
　　　　-webkit-transform:　translate(200px,　50px);　　/*　Chrome,　Safari,　Opera　*/
　　　　　　　-moz-transform:　translate(200px,　50px);　　/*　Firefox　*/
　　　　　　　　-ms-transform:　translate(200px,　50px);　　/*　IE　9　*/
　　　　　　　　　　　　transform:　translate(200px,　50px);　　　　　　
}

测试看看‹/›

属性值

下表描述了此属性的值。

值	描述
translate(tx,ty)	沿X和Y轴将元素移动给定的数量。
translate3d(tx,ty,tz)	沿X，Y和Z轴将元素移动给定的数量。
translateX(tx)	沿X轴将元素移动给定的数量。
translateY(ty)	沿Y轴将元素移动给定的数量。
translateZ(tz)	沿Z轴将元素移动给定的数量。
rotate(a)	根据transform-origin属性定义，以指定的角度围绕元素的原点旋转元素。
rotate3d(x,y,z, a)	[x, y, z]方向ベクトルを中心に、最後の引数で指定された角度で回転します。3空間内の要素。
rotateX(a)	X軸を中心に指定された角度で要素を回転します。
rotateY(a)	要素をY軸を中心に指定された角度で回転します。
rotateZ(a)	Z軸を中心に指定された角度で要素を回転します。
scale(sx,sy)	指定された量で要素の幅と高さを縮尺します。この機能scale(1,1)は無効です。
scale3d(sx,sy,sz)	X、Y、Z軸に沿って指定された量で要素を縮尺します。この機能scale3d(1,1,1)は無効です。
scaleX(sx)	X軸に沿って要素を縮尺します。
scaleY(sy)	Y軸に沿って要素を縮尺します。
scaleZ(sz)	Z軸に沿って要素を縮尺します。
skew(ax,ay)	要素をXとY軸に沿って指定された角度で傾斜させます。
skewX(ax)	要素をX軸に沿って指定された角度で傾斜させます。
skewY(ay)	要素をY軸に沿って指定された角度で傾斜させます。
matrix(n,n,n,n,n,n)	6つの値を持つ変換マトリックスの形式で指定2D変換。
matrix(n,n,n,n,n,n, n,n,n,n,n,n,n,n,n,n)	で16の値4×4変換マトリックスの形式で指定3D変換。
perspective(length)	定義3transform要素の透視視野。通常、この関数値が増えると、要素は視聴者からより遠くに見えます。
none	何も変換を適用しないことを指定します。
initial	この属性をデフォルト値に設定します。
inherit	指定された場合、関連する要素は親要素のtransformの属性値を使用します。

ブラウザ互換性

transform属性のブラウザの互換性について、以下の表の数字はこの属性をサポートするブラウザの最低バージョン番号を示します；すべての主要ブラウザはこの属性をサポートしています。

	Firefox （2D）3.5 +，（3D）10+ ^-moz-，16 + Chrome （2D）4 +，（3D）12+ ^-webkit-，36 + Internet Explorer （2D）9 ^-ms-，10+ Apple Safari （2D）3.2 +，（3D）4+ ^-webkit- Opera （2D）10.5+ -o 　 ^-，（2D）（3D）15+ 　 ^-webkit-，23+

さらに詳しくは

以下のチュートリアルを参照してください：CSS3 2D変換，CSS3 3D変換

CSS3 transform-origin 属性 CSS top 属性