transform
UK[trænsˈfɔ:m] US[trænsˈfɔ:rm]
vt.変換; 変更; 変更
vi.変更
n.[数値] 変換
CSS 変換プロパティ 構文
関数:transform 属性は、要素に 2D または 3D 変換を適用します。このプロパティを使用すると、要素を回転、拡大縮小、移動、または傾けることができます。変換プロパティをより深く理解するには、このデモを確認してください。
構文: transform: none|transform-functions
説明: none は変換を定義しません。行列(n,n,n,n,n,n) は、6 つの値の行列を使用して 2D 変換を定義します。 matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n) は、16 値の 4x4 行列を使用して 3D 変換を定義します。 translation(x,y) は 2D 変換を定義します。 translation3d(x,y,z) は 3D 変換を定義します。 translationX(x) は、X 軸の値のみを使用して変換を定義します。 translationY(y) は、Y 軸の値のみを使用して変換を定義します。 translationZ(z) は、Z 軸値のみを使用して 3D 変換を定義します。 scale(x,y) は 2D スケーリング変換を定義します。 scale3d(x,y,z) は 3D スケーリング変換を定義します。 scaleX(x) X 軸の値を設定することにより、スケーリング変換を定義します。 scaleY(y) は、Y 軸の値を設定することによってスケーリング変換を定義します。 scaleZ(z) Z 軸の値を設定することで 3D スケーリング変換を定義します。 Rotate(angle) パラメータで角度を指定して、2D 回転を定義します。 rotate3d(x,y,z,angle) は 3D 回転を定義します。 rotateX(angle) は、X 軸に沿った 3D 回転を定義します。 rotateY(angle) は、Y 軸に沿った 3D 回転を定義します。 rotateZ(angle) は、Z 軸に沿った 3D 回転を定義します。 skew(x-angle,y-angle) は、X 軸と Y 軸に沿った 2D スキュー変換を定義します。 skewX(angle) は、X 軸に沿った 2D スキュー変換を定義します。 skewY(angle) は、Y 軸に沿った 2D スキュー変換を定義します。パースペクティブ(n) 3D 変換要素のパース ビューを定義します。
注: Internet Explorer 10、Firefox、および Opera は、transform 属性をサポートしています。 Internet Explorer 9 は、代替の -ms-transform プロパティ (2D 変換のみ) をサポートしています。 Safari と Chrome は、代替の -webkit-transform プロパティ (3D および 2D 変換) をサポートしています。 Opera は 2D 変換のみをサポートします。
CSS 変換プロパティ 例
<!DOCTYPE html>
<html>
<head>
<style>
div
{
margin:30px;
width:200px;
height:100px;
background-color:yellow;
/* Rotate div */
transform:rotate(9deg);
-ms-transform:rotate(9deg); /* Internet Explorer */
-moz-transform:rotate(9deg); /* Firefox */
-webkit-transform:rotate(9deg); /* Safari 和 Chrome */
-o-transform:rotate(9deg); /* Opera */
}
</style>
</head>
<body>
<div>Hello World</div>
</body>
</html>インスタンスの実行 »
[インスタンスの実行] ボタンをクリックしてオンライン インスタンスを表示します