CSS3:transformで変形させる。

goto_jp 400views 更新:2014年4月18日

CSS3からの transform プロパティを使うことで様々な変形加工をすることができます。
IEの対応状況はお察し。

CSS

.box {
  margin:20px; background:#ccc; width:100px; padding:40px 10px; text-align:center;
}
// transform:translate 移動する
.translate100 {
  transform:translate(100px,0);
  -webkit-transform:translate(100px,0);
}
// transform:rotate 回転する
.rotate15 {
  transform:rotate(15deg);
  -webkit-transform:rotate(15deg);
}
// transform:scale 拡大・縮小する
.scale05 {
  transform:scale(0.5,0.5);
  -webkit-transform:scale(0.5,0.5);
}
// transform:skew 傾斜変形させる
.skew30 {
  transform:skew(30deg,0);
  -webkit-transform:skew(30deg,0);
}

下記にそのまま例を表示します。
transitionanimation と組み合わせることでダイナミックな変形も可能です。

オリジナル
.translate100
.rotate15
.scale05
.skew30

ログイン / 新規登録してコメントする

このソースコードをストックして後で利用したり、作業に利用したソースコードをまとめることができます。

こちらもお役に立つかもしれません