皆さんはCSSのtransform: scaleに負の数値を指定するとどうなるかご存じですか？
この使い方が非常に便利だと感じたので、今回はその方法を紹介したいと思います。
目次
transform: scaleの常識
通常、CSSのtransform: scaleは要素を拡大するのに用いられます。 例えば、画像にマウスカーソルをホバーした際に画像を拡大表示するような場合です。
transform: scaleで拡大する例
PCブラウザでご覧の場合、下記画像をhoverしてみてください。
ソースコード例
<div class="scale__img">
<img src="" alt="拡大画像" width="768" height="439">
</div>.scale__img {
overflow: hidden;
}
.scale__img img {
transition: all 0.3s;
}
.scale__img img:hover {
transform: scale(1.2);
}負のスケール値を指定して、拡大の常識を変える
transform: scaleでは負の値も指定可能です。これが意外と便利で、具体的な使用例をご紹介します。
見出し装飾の新たな可能性
どのような場合に便利だと思いますか？
例として、見出しの横に装飾として画像を配置する場面を考えてみましょう。 以下のような状況です。 見出しの両端に配置される画像は、左右対称であることが望ましいですが、皆さんはどのように実装しますか？
例えば画像を2つ用意して見出しに擬似要素の「::before」「::after」を使って指定する方法があります。
見出し装飾の例、画像を2つ用意する場合
見出し
ソースコード例
<p class="deco__ttl">
<span>見出し</span>
</p>.deco__ttl {
position: relative;
display: flex;
justify-content: center;
align-items: center;
gap: 20px;
font-size: 28px;
font-weight: 700;
}
.deco__ttl::before,
.deco__ttl::after {
content: "";
width: 32px;
height: 42px;
display: inline-block;
background-repeat: no-repeat;
background-size: cover;
}
.deco__ttl::before {
background-image: url(1つ目の画像のパス);
}
.deco__ttl::after {
background-image: url(2つ目の画像のパス);
}実は画像を2枚用意する必要はありません
もし上記方法で実装しているのであれば、この記事が皆さんにとって価値ある情報になるでしょう。
transform: scaleに負の値を指定すると、画像を2枚用意する必要がなくなります。
簡単な反転テクニック
::beforeには通常どおりの設定を行い、::afterにtransform: scale(-1, 1)を適用することで、画像が反転し、まるで2枚用意したかのような効果を得られます。
transform: scaleに負の値を指定する例
〇〇受賞！
ソースコード例
<p class="award__ttl">
<span>〇〇受賞！</span>
</p>.award__ttl {
position: relative;
display: flex;
justify-content: center;
align-items: center;
gap: 20px;
font-size: 28px;
font-weight: 700;
}
.award__ttl::before,
.award__ttl::after {
content: "";
width: 21px;
height: 52px;
display: inline-block;
background-image: url(1つ目の画像のパス);
background-repeat: no-repeat;
background-size: cover;
}
.award__ttl::after {
transform: scale(-1, 1);
}まとめ
この記事を読むことで、CSSのtransform: scaleを使用した新しいアプローチを理解し、実装の幅を広げることができるでしょう。便利だと思った方はぜひご利用ください！
