CSS コーディング

CSS transformのチートシートを作りました。【translate,rotate,scale,skewの使い方】

CSS transformのチートシート

CSS transformのチートシートを作りました。

transformの一覧表のようなものがなかったので作りました。

書き方を忘れがちなのでぜひコピペして使ってください。

この4つを記載しています。

  • translate…移動
  • rotate…回転
  • scale…拡大・縮小
  • skew…傾ける

demo

translate(移動)

translateは要素を移動します。

translate…縦横に移動する

カーソルを
合わせる

translateX…横に移動する

カーソルを
合わせる

translateY…縦に移動する

カーソルを
合わせる

translateZ

カーソルを
合わせる

rotate(回転)

rotateは要素を回転させます。

rotate…中心を軸に回転

カーソルを
合わせる

rotateX…横軸を中心に回転

カーソルを
合わせる

rotateY…縦軸を中心に回転

カーソルを
合わせる

rotateZ…中心を軸に回転(rotateと同じ)

カーソルを
合わせる

scale(拡大・縮小)

scaleは要素を拡大・縮小させます。

scale…上下左右に拡大・縮小

カーソルを
合わせる

scaleX…横に拡大・縮小

カーソルを
合わせる

scaleY…縦に拡大・縮小

カーソルを
合わせる

scaleZ

カーソルを
合わせる

skew(傾ける)

skewは要素を傾けます。

skew…縦横に傾ける

カーソルを
合わせる

skewX…横に傾ける

カーソルを
合わせる

skewY…縦に傾ける

カーソルを
合わせる

スポンサーリンク

-CSS, コーディング

© 2020 まめしばweb Powered by AFFINGER5