新人エンジニアのメモ

新人エンジニアの日々学んだことをアップしていきます。最近はQiitaも始めました。https://qiita.com/nacho0707

【CSS】transformプロパティ

transformプロパティとは

  • 要素を移動、回転、拡大/縮小、傾斜することが可能。
transformプロパティの主な設定値
設定値 説明
translate(X軸[,Y軸]) 要素を移動する。
rotate(角度) 要素を回転する。
scale(数値) 要素を拡大/縮小する。
skew(角度)

要素を傾斜する。

※skewXやskewYの仕様が推奨

 

要素を傾斜して表示させるCSSの記述例

img {

    transform: skewX(30deg);

}