備忘録的プログラミングリファレンス

scale3d() ファンクション

 scale3d() ファンクションは、立体的に拡大値/縮小したエレメントを返す CSS 関数です。
 引数のX軸、Y軸、Z軸の拡大/縮小率に関するベクトル値から計算されます。

 引数はカンマ「,」で区切ります。

scale3d()
.content {
	transform-origin: initial;
	transform: scale3d( 1.1, 1.4, 1.8 );
}

動作の確認はExampleを参照してください

 引数には倍率を指定します。拡大も縮小もしていない元の大きさは、1 または 100% です。この値を増加すれば拡大、減少すれば縮小です。

 scale3d() ファンクションは、エレメントの変形に関する transform プロパティで利用する transform-functions の一つです。

  transform プロパティの拡大/縮小の基点は、 transform-origin プロパティによってその基点を決めます。

構文(Syntax)

CSS

scale3d( x, y, z )

引数

 引数は、X軸方向、Y軸方向、Z軸方向への拡大/縮小の割合です。数値またはパーセンテージで指定してください。 1 または 100% が基準で数値が大きくなれば拡大、数値が 1 または 100% より小さくなれば縮小します。

Example

 scale3d() 関数による拡大/縮小の例です。

 拡大/縮小の基点の調整には、transform-origin プロパティを使用します。 ここでは、左上端を基点として拡大しています。

 ここでは、平面ですのでX軸とY軸のみの変化で表示されています。