要素をページの下部に固定したまま、transform:scale(x)プロパティを使用することはできますか?(デフォルトでは、以下に示すように要素の中心を基準にして拡大縮小します)
(出典:w3schools.com)
要素をページの下部に固定したまま、transform:scale(x)プロパティを使用することはできますか?(デフォルトでは、以下に示すように要素の中心を基準にして拡大縮小します)
(出典:w3schools.com)
プロパティを使用しtransform-origin
ます:
element{
-webkit-transform : scale(0.5);
-moz-transform : scale(0.5);
-o-transform : scale(0.5);
-ms-transform : scale(0.5);
transform : scale(0.5);
-webkit-transform-origin : 50% 100%;
-moz-transform-origin : 50% 100%;
-o-transform-origin : 50% 100%;
-ms-transform-origin : 50% 100%;
transform-origin : 50% 100%;
}
これが実際の動作を示すライブデモです。transform-origin
問題は、オブジェクトの軸を選択できるかどうかです。私はこれに対する答えを知りません、そして私はそれがおそらくそうではないと推測しています。
本当に「軸」を設定できない場合は、同時に移動しながらボックスを変形する必要があります。