【CSS】transformでコンテンツを拡大・縮小させる方法
前回は、transform で、特定のコンテンツを回転させる方法を紹介しました。
【CSS】transformでコンテンツを回転させる方法
今回は、transform で、コンテンツを拡大・縮小させる方法を紹介します。
基本のコードは、以下になります。
コンテンツを拡大・縮小する
コンテンツを拡大・縮小させるには、transform: scale();を使用します。
カッコの中に、拡大・縮小したい倍率を指定します。
例えば、四角形を 2 倍に拡大したい場合、transform: scale(2);を設定します。
ブラウザで確認すると、
青い四角形が拡大されました。
反対に、四角形を 1/2 に縮小するには、transform: scale(0.5);を設定します。
青い四角形が縮小されました。
四角形を横に 2 倍、縦に 3 倍拡大したい場合は、transform: scale(2, 3);を設定します。
ブラウザで確認すると、
四角形が、指定した通り拡大されました。
コンテンツを横方向へ拡大・縮小する
コンテンツを横方向へ拡大・縮小させるには、transformでscaleX();を設定します。
例えば、四角形を横方向へ 1.5 倍拡大させるには、transform: scaleX(1.5);を設定します。
ブラウザで確認すると、
青い四角形が横方向へ 1.5 倍拡大されました。
コンテンツを縦方向へ拡大・縮小する
コンテンツを縦方向へ拡大・縮小させるには、transformでscaleY();を設定します。
例えば、四角形を縦方向へ 3 倍拡大させるには、transform: scaleY(3);を設定します。
ブラウザで確認すると、
青い四角形が縦方向へ 3 倍拡大されました。
アニメーションなどで使用することになりますので、ぜひ試してみてください。
お知らせ
私事ですが、Udemyで初心者を対象にしたReactの動画コースを作成しました。
Reactについて興味がありましたら、ぜひ下のリンクからアクセスしてください。
詳しくはこちら(Udemyの外部サイトへ遷移します)