【CSS Modules】transformプロパティの使い方

transformプロパティは、CSS ModulesにおいてHTML要素の視覚的な表現を変更するためのプロパティです。このプロパティを使用することで、要素を2次元または3次元空間で移動、回転、拡大縮小、傾斜させることができます。

具体的には、translate()関数で要素の位置を動かしたり、rotate()関数で要素を回転させたり、scale()関数で要素のサイズを変更したり、skew()関数で要素を傾かせたりします。さらに、matrix()やmatrix3d()関数を用いることで、より複雑な2Dまたは3Dの変換を一度に適用することも可能です。3D変換では、要素に遠近感を加えるperspective()や、X軸、Y軸、Z軸を中心に回転させるrotateX(), rotateY(), rotateZ()なども利用できます。

複数の変換を組み合わせる場合は、半角スペースで区切って記述します。これらの変換は、要素の見た目のみに影響を与え、その要素がドキュメントフロー内で占めるレイアウト上の空間には通常影響を与えません。これにより、他の要素の配置が変わることなく、対象の要素だけを自由に操作できます。

transformプロパティは、Webサイトのアニメーションやトランジション、インタラクティブなユーザーインターフェースを実装する際に非常に強力な機能です。多くの場合、グラフィック処理装置（GPU）を利用した描画が可能であるため、スムーズで高性能な視覚効果を実現しやすいという利点があります。変換の基準点を指定するtransform-originプロパティと併用することで、より細かく動きを制御できます。

Copy
1.element {
2  transform: translateX(50px) rotate(45deg);
3}

引数なし

引数はありません

戻り値なし

戻り値はありません