【CSS】transformは使わずに個別指定可能？

こんにちは、今回のテーマはCSSのtransformについてになります。

従来ではtranslate、rotateなどの指定をまとめてtransform内に記述していましたが、これらを個別のプロパティとして指定できるようになりました。

これは個人的には非常に嬉しい新機能です。

つまりどういうことなのかはDEMOとソースを見たほうが理解が早いと思うので早速説明していきますね。

DEMOはtransformを使用した場合と使用しない場合の2パターンを作りました。ホバー時の動きも用意して比較しやすいようにしてあります。

→DEMO

見た目上の違いはありませんが、CSSの書き方は以下のような違いになっております。

■CSS

上記の様に従来ではtransform内に全てまとめ、ホバー時に値を変える場合も全ての処理を記述していました。

ですがその必要は無くなり、個々で記述できるようになりました。

調査した結果、この個別のプロパティに対応しているのはtranslate、rotate、scaleの3つとなります。他は従来の記述方法でやるしかないみたいですね。

※両方書いた場合は個別のプロパティで書いたほうが優先されます。

記述が楽になったのはもちろん嬉しいですが、javascriptなどと組み合わせた時に要素の動きの幅が広がりそうですね。

例えばjavascriptで動的にtransformの値を変更して動きを実装している個所があるとします。

もしtransform内にscaleなどを追記して大きさなどを変えたい場合、transformは既にjavascriptで使用されてるので追加でCSSで記述することはできません。（jacascriptの記述が優先されてしまう為）

つまりjavascriptの調整が必要となってしまいます。プラグインを使用していたらほぼ調整できないor非常に面倒な事の方が多いですよね。

そこでCSSの個別のプロパティを使用することでjavascriptとのバッティングを避けて指定することが可能となりました。

javascriptの記述にも左右されにくくなったのは大きな利点です。

対応ブラウザについても以下に載せときますね。translateのものになりますが、rotate、scaleも同様となります。

→Can I use…

モダンブラウザは対応されているので特に気にせず使用可能かと思います。

昔できなかったことが最近は出来るようになったりしていることが結構多いので、情報収集は欠かしてはいけませんね。

今後もこういった細かい便利な新機能を紹介していければと思います。

以上、クリエイターブログでした。