scale3d() ファンクション
scale3d() ファンクションは、立体的に拡大値/縮小したエレメントを返す CSS 関数です。
引数のX軸、Y軸、Z軸の拡大/縮小率に関するベクトル値から計算されます。
引数はカンマ「,」で区切ります。
.content {
transform-origin: initial;
transform: scale3d( 1.1, 1.4, 1.8 );
}
引数には倍率を指定します。拡大も縮小もしていない元の大きさは、1 または 100% です。この値を増加すれば拡大、減少すれば縮小です。
scale3d() ファンクションは、エレメントの変形に関する transform プロパティで利用する transform-functions の一つです。
transform プロパティの拡大/縮小の基点は、 transform-origin プロパティによってその基点を決めます。
ページ内 Index
- ad -
構文(Syntax)
CSS
scale3d( x, y, z )
引数
引数は、X軸方向、Y軸方向、Z軸方向への拡大/縮小の割合です。数値またはパーセンテージで指定してください。
1
または 100%
が基準で数値が大きくなれば拡大、数値が 1
または 100%
より小さくなれば縮小します。
Example
scale3d() 関数による拡大/縮小の例です。
拡大/縮小の基点の調整には、transform-origin プロパティを使用します。 ここでは、左上端を基点として拡大しています。
ここでは、平面ですのでX軸とY軸のみの変化で表示されています。
- ad -
関連する CSS プロパティとファンクション
プロパティ
プロパティ | 摘要 |
---|---|
transform | エレメントの変形を表示 |
transform-origin | 基準点(中心)を指定する |
transform-style | 親エレメン上に表示するか、3D上に表示するか |
視点距離 | |
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次元に配置されたエレメントを回転、拡大/縮小、傾斜、移動 |