css

【CSS】画像にカーソル乗せた時、画像が拡大 transform:scale

画像の上にカーソルを乗せた時、画像が大きくなるような動きをCSSアニメーションで実装することができます。
具体的にはtransformプロパティを使います。scale()は値です。
(例)transform: scale(1.6, 1.6) ・・・ 要素をx軸方向、y軸方向に1.6倍拡大する
【CSS】hover(マウスオーバー)で画像を拡大ズームする方法 
参考URL:2024.10.4 じゅんぺいブログ

<<<<< その他 transformプロパティで指定できる関数 >>>>>
■rotate() 要素を回転させることができる関数
【transform:rotate()】要素を回転させることができる

■translate() 要素を移動させることができる関数
【transform:translate()】xy軸上の移動することができる

■scale() 要素を伸縮させることができる関数
【transform: scale(1.6, 1.6) 】要素をx軸方向、y軸方向に1.6倍拡大できる

■skew() 要素を歪ませることができる関数
【transform:skew()】要素に傾斜をつけることができる

【font】16px ⇆ 1rem 数値変換早見表

■16px ⇆ 1rem 数値変換早見表

16pxの時にrem値の計算表。コーディングの際に役立ててください。
2pxにつき0.125pxプラスされます。

px rem
10px 0.625rem
12px 0.75rem
14px 0.875rem
16px 1rem
18px 1.125rem
20px 1.25rem
22px 1.375rem
24px 1.5rem
26px 1.625rem
28px 1.75rem
30px 1.875rem
32px 2rem
34px 2.125rem
36px 2.25rem
38px 2.375rem
40px 2.5rem
42px 2.625rem
44px 2.75rem
46px 2.875rem
48px 3rem
50px 3.125rem
60px 3.75rem
70px 4.375rem
80px 5rem
90px 5.625rem
100px 6.25rem