mania-ku

何か作りたいプログラマ未満。

【CSS3】transformで変形

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));
Pocket
LINEで送る