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

scaleZ() ファンクション

 scaleZ() ファンクションは、引数の値からZ軸方向に拡大/縮小したエレメントを返す CSS 関数です。

 X軸は scaleX() 、Y軸は scaleY() を使用します。X軸、Y軸、Z軸方向の拡大/縮小を一括して指定するには scale3d() を使用します。

scaleZ() ファンクション
.content {
	transform-origin: initial;
	transform: scaleZ( 1.5 );
}

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

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

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

構文(Syntax)

 scaleZ() 関数の構文です

CSS

scaleZ( z )

引数

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

Example

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

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

 ここでは、平面ですので表示に変化はありません。