このウェブサイトはご利用の端末での閲覧に対応していません。
This website does not support your device.

scale()”関数CSS3で追加

記事Aug.3rd,2021
要素を二次元平面上で拡大もしくは縮小するCSSの関数、“scale()”について
この記事はCSS3に対応しています。
この記事はCSS3に対応しています。

scale()”関数

scale()”関数は要素を二次元平面上(xy-平面)で拡大もしくは縮小するための関数です。

<transform-function>”値として使用することができ、transform”プロパティで要素を拡大もしくは縮小させることができます。

引数は2個の<number>”値もしくは<percentage>”値をコンマ“,”で区切って記述します。

scale(〚X軸方向の拡大率〛,〚Y軸方向の拡大率〛)

<percentage>”値の“100%”は<number>”値の“1”に、“0%”は“0”に対応します。

1個目の引数はX軸方向の拡大率を表します。

2個目の引数はY軸方向の拡大率を表します。2個目の引数は任意で、省略された場合は1個目の引数と同じものとして扱われます。

引数が“-1”より小さいか“1”より大きい数である場合は要素は拡大されます。また、“-1”と“1”の間の数である場合は要素は縮小されます。引数が“-1”もしくは“1”の場合は大きさは変化しません。

1個目の引数が負の数である場合はX軸方向(左右)、2個目の引数が負の数である場合はY軸方向(上下)に反転します。

変形マトリクス

以下は“scale(x,y)”を表す変形マトリクスの成分です。

m11 m21 m31 m41
m12 m22 m32 m42
m13 m23 m33 m43
m14 m24 m34 m44
x 0 0 0
0 y 0 0
0 0 1 0
0 0 0 1

使用例

二次元

.transform-1 { transform: scale(1,1);}
.transform-2 { transform: scale(1,1.5);}
.transform-3 { transform: scale(1.5,1);}
.transform-4 { transform: scale(1.5,1.5);}
.transform-5 { transform: scale(0.5,0.5);}
.transform-6 { transform: scale(-1,1);}
.transform-7 { transform: scale(1,-1);}
.transform-8 { transform: scale(-1,-1);}
scale(1,1)
scale(1,1.5)
scale(1.5,1)
scale(1.5,1.5)
scale(0.5,0.5)
scale(-1,1)
scale(1,-1)
scale(-1,-1)

三次元

.transform-1 { transform: scale(1,1);}
.transform-2 { transform: scale(1,1.5);}
.transform-3 { transform: scale(1.5,1);}
.transform-4 { transform: scale(1.5,1.5);}
.transform-5 { transform: scale(0.5,0.5);}
.transform-6 { transform: scale(-1,1);}
.transform-7 { transform: scale(1,-1);}
.transform-8 { transform: scale(-1,-1);}
scale(1,1)
scale(1,1.5)
scale(1.5,1)
scale(1.5,1.5)
scale(0.5,0.5)
scale(-1,1)
scale(1,-1)
scale(-1,-1)

仕様書

定義されている仕様書
Level 1 Level 2
勧告候補(CR) 作業草稿(WD)
scale()
定義あり

定義あり
一番上へ
トップにもどる
シェアする
シェアする
Facebookでシェアする
ツイート
Google+でシェア
Pocket
はてなブックマーク