scaleX() ファンクション
scaleX() ファンクションは、引数の値からX軸方向に拡大値／縮小したエレメントを返す CSS 関数です。
.content {
transform-origin: initial;
transform: scaleX( 1.5 );
}
動作の確認はExampleを参照してください
rotate() ファンクションは、エレメントの変形に関する transform プロパティで transform-functions として利用します。
transform プロパティの拡大／縮小の基点は、 transform-origin プロパティによってその基点を決めます。
X軸、Y軸、Z軸方向の拡大／縮小を一括して指定するには scale3d() を使用します。Y軸のみは scaleY() 、Z軸のみは scaleZ() を使用します。
ページ内 Index
構文(Syntax)
CSS
scaleX( x )
引数
引数は、X軸方向への拡大／縮小の割合です。数値またはパーセンテージで指定してください。
1 または 100% が基準で数値が大きくなれば拡大、数値が 1 または 100% より小さくなれば縮小します。
Example
scaleX() 関数による拡大／縮小の例です。
拡大／縮小の基点の調整には、transform-origin プロパティを使用します。 ここでは、左上端を基点として拡大しています。
関連する CSS プロパティとファンクション
プロパティ
| プロパティ | 摘要 |
|---|---|
| transform | エレメントの変形を表示 |
| transform-origin | 基準点（中心）を指定する |
| transform-style | 親エレメン上に表示するか、３Ｄ上に表示するか |
| 視点距離 | |
| perspective | 3Dで使用、視点からの距離を指定 |
ファンクション
| ファンクション | 摘要 |
|---|---|
| 回転 | |
| rotate( angle ) | エレメントの回転を角度で指定（単位：deg） |
| rotate3d( x, y, z, angle ) | x,y,zは基準軸の有無を表す、0または1。angleは回転量（単位：deg） |
| rotateX(angle) | X軸（水平方向）を中心に回転（単位：deg） |
| rotateY(angle) | Y軸（垂直方向）を中心に回転（単位：deg） |
| rotateZ(angle) | Z軸（前後方向）を中心に回転（単位：deg） |
| 拡大/縮小 | |
| scale( x ,y ) | X軸やY軸方向の拡大/縮小を数値で指定、CSS 長さの単位 を参照のこと |
| scale3d( x, y, z ) | X、Y、Z軸方向の拡大/縮小を数値で指定、CSS長さの単位を参照のこと |
| scaleX(x) | X軸（水平）方向の拡大/縮小を数値で指定、CSS長さの単位を参照のこと |
| scaleY(y) | Y軸（垂直）方向の拡大/縮小を数値で指定、CSS長さの単位を参照のこと |
| scaleZ(z) | Z軸（前後）方向の拡大/縮小を数値で指定、CSS長さの単位を参照のこと |
| 傾斜 | |
| skew( x-angle, y-angle ) | X軸やY軸の傾きを角度で指定（ 単位：deg ） |
| skewX(angle) | X軸の傾きを角度で指定（単位：deg） |
| skewY(angle) | Y軸の傾きを角度で指定（単位：deg） |
| 移動 | |
| translate( x, y ) | X軸やY軸方向への移動量を数値で指定、CSS長さの単位を参照のこと |
| translate3d(x,y,z) | X、Y、Z軸方向を数値で指定、CSS長さの単位を参照のこと |
| translateX(x) | X軸（水平）方向に移動、数値で指定、CSS長さの単位を参照のこと |
| translateY(y) | Y軸（垂直）方向に移動、数値で指定、CSS長さの単位を参照のこと |
| translateZ(z) | Z軸（前後）方向に移動、数値で指定、CSS長さの単位を参照のこと |
| 行列変換 | |
| matrix( a, b, c, d, x, y ) | 平面のエレメントを回転、拡大/縮小、傾斜、移動 |
| matrix3d(a1,b1,c1,d1,a2,b2,c2,d2,a3,b3,c3,d3,a4,b4,c4,d4) | 3次元に配置されたエレメントを回転、拡大/縮小、傾斜、移動 |