要素を変形させる方法 (transform) [CSS]

transform

要素に移動、回転、拡大縮小、傾斜などの変形を適用する。

参考：

transform | MDN

概要

参考：

座標変換の使用 | MDN

使い方

参考：

transform 関連のまとめ – Qiita

CSS で要素を変形！ transform の基本をおさらいしよう rotate、skew 編 | Maromaro Blog

もう誤魔化さない！ Transform 完全入門 2D編 | ICS MEDIA

2D Transforms | W3Schools

transform Property | W3Schools

関数

• translate
• rotate
• scale
• skew
• perspective

参考：

transform-function | MDN

rotate

参考：

transform:rotate() | HTML クイックリファレンス

rotate() | MDN

transform が効かない

原因：

インライン要素には transform プロパティは適用されない。

対処法：

要素をインラインブロック要素にして transform プロパティを適用する。

.large {
    display: inline-block;
    tramsform: scale(2, 1.5);
}Code language: CSS (css)

参考：

transform が効かない | 7cc

transform が効かないときに疑うところと解決方法 | サイナビ

transform が効かない時の要因 | ZIGZOW