CSS3で自由自在に変形させる

css3

CSS3なら簡単に変形が表現できる

CSS3からより簡単にskew(傾斜)、rotate(回転)、scale(拡大縮小)、 translate(平行移動)といった変形を表現することが可能になりました。今回はこれらの変形のCSS3テクニックを紹介します。

変形させてみる

サンプル

  • normal(基本形)
  • skew(傾斜)
  • rotate(回転)
  • scale(拡大縮小)
  • translate(平行移動)

サンプルソース

HTML部


		<ul>

			<li>normal(基本形)</li>

			<li id="skew">skew(傾斜)</li>

			<li id="rotate">rotate(回転)</li>

			<li id="scale">scale(拡大縮小)</li>

			<li id="translate">translate(平行移動)</li>

		</ul>

CSS部


各ブラウザごとにプレフィックスを設定します。

-ms-    IE用

-moz-   FireFox用

-webkit- chrome Safari用

-o-     Opera用

#skew {

	-ms-transform:skewX(30deg);

	-moz-transform:skewX(30deg);

	-webkit-transform:skewX(30deg);

	-o-transform:skewX(30deg);

	transform:skewX(30deg);

}

#rotate {

	-ms-transform:rotate(30deg);

	-moz-transform:rotate(30deg);

	-webkit-transform:rotate(30deg);

	-o-transform:rotate(30deg);

	transform:rotate(30deg);

}

#scale {

	-ms-transform:scale(1.5);

	-moz-transform:scale(1.5);

	-webkit-transform:scale(1.5);

	-o-transform:scale(1.5);

	transform:scale(1.5);

}

#translate {

	-ms-transform:translate(50px);

	-moz-transform:translate(50px);

	-webkit-transform:translate(50px);

	-o-transform:translate(50px);

	transform:translate(50px);

}

一言

このようにCSS3では簡単に変形が可能になりました。今まで画像を用意していた形がCSS3によりテキスト表現できるのはありがたいですね。

rss登録 rss登録 rss登録

コメント

コメントをお寄せください。

コメントの投稿

コメントフィード コメントフィード

トラックバックURL: http://select.rash.jp/css/173/trackback/