Aug.3rd,2021
＃
“scale()”関数
“scale()”関数は要素を二次元平面上(xy-平面)で拡大もしくは縮小するための関数です。
“<transform-function>”値として使用することができ、“transform”プロパティで要素を拡大もしくは縮小させることができます。
引数は2個の“<number>”値もしくは“<percentage>”値をコンマ“,”で区切って記述します。
scale(〚X軸方向の拡大率〛,〚Y軸方向の拡大率〛)
“<percentage>”値の“100%”は“<number>”値の“1”に、“0%”は“0”に対応します。シリアル化の際には“<percentage>”値は“<number>”値に置き換えられます。
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-9 { transform: scale(100%,100%);}
.transform-10 { transform: scale(100%,150%);}
.transform-11 { transform: scale(150%,100%);}
.transform-12 { transform: scale(150%,150%);}
.transform-13 { transform: scale(50%,50%);}
.transform-14 { transform: scale(-100%,100%);}
.transform-15 { transform: scale(100%,-100%);}
.transform-16 { transform: scale(-100%,-100%);}
scale(100%,100%)
箱
scale(100%,150%)
箱
scale(150%,100%)
箱
scale(150%,150%)
箱
scale(50%,50%)
箱
scale(-100%,100%)
箱
scale(100%,-100%)
箱
scale(-100%,-100%)
箱
三次元
.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-9 { transform: scale(100%,100%);}
.transform-10 { transform: scale(100%,150%);}
.transform-11 { transform: scale(150%,100%);}
.transform-12 { transform: scale(150%,150%);}
.transform-13 { transform: scale(50%,50%);}
.transform-14 { transform: scale(-100%,100%);}
.transform-15 { transform: scale(100%,-100%);}
.transform-16 { transform: scale(-100%,-100%);}
scale(100%,100%)
前
後
右
左
上
下
scale(100%,150%)
前
後
右
左
上
下
scale(150%,100%)
前
後
右
左
上
下
scale(150%,150%)
前
後
右
左
上
下
scale(50%,50%)
前
後
右
左
上
下
scale(-100%,100%)
前
後
右
左
上
下
scale(100%,-100%)
前
後
右
左
上
下
scale(-100%,-100%)
前
後
右
左
上
下
＃
