【CSS3】transformで変形

  • 投稿日
  • 著者 ituki
  • カテゴリー CSS
Pocket
LINEで送る

transformはwebkitのみベンタープリフィックスが必要です。
注意点としては、基準位置（transform-origin）がcenter centerなこと。
Flashの代替だから、こういう仕様なんでしょうか？

拡大

  • 縦横拡大　transform: scale(横の拡大率,縦の拡大率)
  • 横のみ拡大　transform: scaleX(拡大率)
  • 縦のみ拡大　transform: scaleY(拡大率)
  • 高さも拡大　transform: scale3d(横の拡大率,縦の拡大率,高さの拡大率)

移動

  • 縦横移動　transform: translate(横の移動距離,縦の移動距離);
  • 横のみ移動　transform: translateX(移動距離);
  • 縦のみ移動　transform: translateY(移動距離);

回転

  • 時計回りに回転　transform: rotate(角度（単位はdeg）);
  • X軸で回転　transform: rotateX(角度（単位はdeg）);
  • Y軸で回転　transform: rotateY(角度（単位はdeg）);

傾斜

  • 傾斜　transform: skew((角度（単位はdeg）,(角度);
  • Xに傾斜　transform: skewX((角度（単位はdeg）);
  • Yに傾斜　transform: skewY((角度（単位はdeg）);

CSS3