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); }
下記にそのまま例を表示します。
transition、animation と組み合わせることでダイナミックな変形も可能です。
オリジナル
.translate100
.rotate15
.scale05
.skew30