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

エ・ビスコム・テック・ラボ
2009-09-08 13:27:01
これまでFirefox 3.5が新たに対応したCSSの機能を紹介してきた。最後となる今回は、トランスフォーム（transform）や改行のコントロール（word-wrap、white-space）、透過（opacity）、カラーマネジメントの機能について見ていく。
最新特集【一覧】

防水スピーカーをワイヤレス化、お風呂でのんびり音楽を楽しむ

自作バーコードで音楽CDを管理する

Perfumeが公開したダンスのモーションデータをChromeで扱う

　前回の「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);
}

おやすみ



おはよう



こんにちは
※ブラウザで表示を確認する

参照記事

  • 新着記事
  • 特集
  • ブログ