CSS3

CSS:transformトランスフォーム大好き!驚きと感嘆のCSS3 transformの動きを確認してみよう。

css3になって、実に豊かな表現ができるようになった。

transform(トランスフォーム)もその一つ。動きを確認したかったので、書籍を参考にしてサンプルを作ってみた。

参考にした書籍はこちら。

僕の中では、CSS3のバイブルとなっている書籍。非常にわかりやすく記述されている。詳細な機能は書籍を参考にしてもらうとして、今回は簡単なサンプルを作ってみました。

コードをコピーしたい方は、サンプルコードの右端のアイコン(<>)をクリックすると別ウィンドウが開くのでコピーすることができます。

アクションは、画像をマウスでhover(ホバー)したときに起こします。

transformには、2D(X軸、Y軸)、3D(X軸、Y軸、Z軸)とがありますが、今回は、2Dをやりました。

では、さっそく!2Dトランスフォーム transform

回転:rotate(ローテート)

rotate(ローテート)は、「回転する」の意味です。

指定方法は、rotate(度数)です。20度の場合は、rotate(20deg)と指定します。

a1180_007204

[css]
.act01:hover{
/* rotate 回転 */
-webkit-transform:rotate(20deg);
-ms-transform:rotate(20deg);
transform:rotate(20deg);
}
[/css]

拡大縮小:scale(スケール)

scale(スケール)は拡大縮小させます。

指定方法は、scale(X軸方向の倍数,Y軸方向の倍数)です。横(X軸)で1.5倍引き延ばして、縦(Y軸)に2倍伸ばす場合は、scale(1.5,2)という指定になります。簡単に拡大縮小ができて便利です!

a1180_007204

[css]
.act02:hover{
/* scale 拡大縮小 */
-webkit-transform:scale(1.5,2);
-ms-transform:scale(1.5,2);
transform:scale(1.5,2);
} [/css]

傾斜、歪める:skew(スキュー)

skew(スキュー)はグイっと歪めることができます。

指定方法は、scale(X軸の傾斜,Y軸の傾斜)です。横(X軸)で30度傾斜して、縦(Y軸)に15度傾斜する場合は、skew(30deg,15deg)という指定になります。CSSで歪めることができてしまうことが、少し斬新ですね!!

a1180_007204

[css]
.act03:hover{
/* skew 歪める */
-webkit-transform:skew(30deg,15deg);
-ms-transform:skew(30deg,15deg);
transform:skew(30deg,15deg);
}
[/css]

移動:translate(トランスレート)

translate(トランスレート)は、移動させます。そう、動かすことができます!!

指定方法は、translate(X軸方向,Y軸方向)です。横(X軸)で50px移動して、縦(Y軸)に150px移動する場合は、translate(50px,150px)という指定になります。

a1180_007204

[css]
.act04:hover{
/* translate 移動 */
-webkit-transform:translate(50px,150px);
-ms-transform:translate(50px,150px);
transform:translate(50px,150px);
}
[/css]

書籍はKindle版がおすすめ!

CSS3 スタンダード・デザインガイドはKindle版でもすごく読みやすい。僕は、Kindle版で購入した。紙書籍だと重いし、満員電車ではとても読めない。

Kindle版ならば、空き時間でちょこちょこと読み進めることでできるのですごく便利)^o^(