CSS3 変形処理を行う transform プロパティ

CSS3 変形処理を行う transform プロパティ

transform は文字や画像を拡大・縮小、移動、回転などを指定出来るプロパティです。

単独でも使いがっては色々あるのですが、前回の記事「CSS3 アニメーション(Transitions)の使用方法」と併用して使ったらさらに面白い動きも出来ちゃったりします。

という事で今回は transform の基礎や使い方やなどを紹介したいと思います。

Download

…ここからが続き

Transform の基本

対応ブラウザ(2010 3/31 現在)
Safari , Google Chrome , Firefox

transform

生成されたボックスを変形、移動、回転などを指定出来ます。指定できる値は以下の通りです。

rotate(deg)回転(deg で指定。10deg や -10deg など)
scale(xy[x,y])拡大・縮小(数値を指定。1 や 0.5 など)
skew(deg)X軸,Y軸へのゆがみ(degで指定。10deg や -10deg など)
translate(xy[x,y])移動(px で指定。10px など)

transform

transform-origin

transform の基準点を指定します。(初期値は 50% 50% と要素の中心です。)

transform-origin

回転 rotate(deg)の使い方

指定された要素を回転させる事が出来ます。(deg で指定。10deg や -10deg など)

transform-origin を指定しない

.demo1	{
	-webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
}
.demo2	{
	-webkit-transform: rotate(150deg);
    -moz-transform: rotate(150deg);
}
.demo3	{
	-webkit-transform: rotate(-10deg);
    -moz-transform: rotate(-10deg);
}

rotate(deg) transform-origin を指定しない

transform-origin を要素の左下に指定

※上記ソースに下記ソース追加

div	{
	-moz-transform-origin: 0 100%;
	-webkit-transform-origin: 0 100%;
}

rotate(deg) transform-origin を要素の左下に指定

拡大・縮小 scale(xy[x,y])の使い方

指定された要素を拡大・縮小させる事が出来ます。(数値を指定。2 や 0.5 など)

.demo1	{
	-webkit-transform: scale(0.5);
	-moz-transform: scale(0.5);
}
.demo2	{
	-webkit-transform: scale(2.0);
	-moz-transform: scale(2.0);
}

拡大・縮小 scale(xy[x,y])のデモページ

X軸,Y軸へのゆがみ skew(deg)の使い方

指定された要素をX軸,Y軸へのゆがまさせる事が出来ます。(degで指定。10deg や -10deg など)

.demo1	{
	-webkit-transform: skew(45deg);
	-moz-transform: skew(45deg);
}
.demo2	{
	-webkit-transform: skew(150deg);
	-moz-transform: skew(150deg);
}
.demo3	{
	-webkit-transform: skew(-10deg);
	-moz-transform: skew(-10deg);
}
.demo4	{
	-webkit-transform: skew(0,-10deg);
	-moz-transform: skew(0,-10deg);
}

X軸,Y軸へのゆがみ skew(deg)のデモページ

移動 translate(xy[x,y])の使い方

指定された要素を移動させる事が出来ます。(px で指定。10px など)

.demo1	{
	-webkit-transform: translate(300px);
	-moz-transform: translate(300px);
}
.demo2	{
	-webkit-transform: translate(-50px,100px);
	-moz-transform: translate(-50px,100px);
}

移動 translate(xy[x,y])のデモページ

Download

Comment Form

※コメントが認証されるまで、コメントは反映されません。ご了承くださいませ。


(公開されません)
 
Captcha

画像の中に見える文字を入力してください。

page top へ

Sponsor

  • heteml
  • Movable Type

Category

Recent Article

2011 04-05
iPhone スマートフォンサイトのデザインのまとめ
2011 04-04
スマートフォン対応にしてみました
2011 04-01
CSS3 要素を透明に出来る Opacity と RGBa の使い方
2011 03-31
サイトリニューアルしました
2010 12-01
CSS3 でボタンを作る為のテクニック、サンプル集
2010 11-24
綺麗でリッチなフッターデザイン集のまとめ 60
2010 11-18
緑と黒色を使った Webデザインのサイト 25
2010 11-10
知っておいた方が便利なエクセルの知識

Recent Comments

Archive

2011年
2010年
2009年
2008年

Related Article