Firefox 3.5のCSS新対応：トランスフォーム、透過、カラーマネジメント

エ・ビスコム・テック・ラボ
2009/09/08 13:27

これまでFirefox 3.5が新たに対応したCSSの機能を紹介してきた。最後となる今回は、トランスフォーム（transform）や改行のコントロール（word-wrap、white-space）、透過（opacity）、カラーマネジメントの機能について見ていく。

　前回の「text-shadow、-moz-box-shadow、-moz-border-image、-moz-column-rule編」、前々回の「Webフォント、メディアクエリ、セレクタ編」と、Firefox 3.5が対応したCSSの新機能についてまとめてきた。

　最後となる今回は、トランスフォーム（transform）や改行のコントロール（word-wrap、white-space）、透過（opacity）、カラーマネジメントの機能について見ていきたい。

トランスフォーム

　CSS 3のtransformとtransform-originプロパティがサポートされ、文字や画像に回転やスキュー（シアー）などのトランスフォーム処理（変形処理）を適用できるようになった。

　たとえば、次のサンプルは「移動」「回転」「拡大・縮小」の処理を設定値を変えながら3つのテキストに適用したものだ。transformプロパティにはベンダープレフィックス「-moz-」をつけて記述する。

Firefox 3.5の表示（画像をクリックすると拡大します） Firefox 3.5の表示（画像をクリックすると拡大します） 
#text01	{
	-moz-transform: translate(0px, 0px) rotate(0deg) scale(0.7);
	}

#text02	{
	-moz-transform: translate(100px, 80px) rotate(20deg) scale(1.2);
	}

#text03	{
	-moz-transform: translate(150px, 230px) rotate(45deg) scale(1.5);
	}

<div id="text01">おやすみ</div>

<div id="text02">おはよう</div>

<div id="text03">こんにちは</div>
※ブラウザで表示を確認する

参照記事

記事に関係する情報をコメントでお寄せください

ニックネーム : CNET_IDにログインしてコメントする

コメント本文（必須） :
  • 新着記事
  • 人気記事
  • 特集
  • ブログ
  • 話題のタグ
ブラウザ Tips 仮想化 セキュリティ ソフトウェア開発 プログラミング言語 HTML Safari php 開発環境 Webデザイン Firefox 3 UI Chrome iPod touch Database Mac OS X javascript 脆弱性 WebKit google マイクロソフト Webサービス CSS 小技 Off Topic iPhone iPhone 3G Firefox Ajax java Windows XP Apple リファレンス クラウド RIA Mozilla OS オープンソース Windows 7 Windows Internet Explorer インストール データベース アプリケーション Flash linux Windows Vista Opera Microsoft
  • 話題のタグを見る »