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

エ・ビスコム・テック・ラボ
2009-09-08 13:27:01
  • このエントリーをはてなブックマークに追加
最新特集【一覧】

 前回の「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);
}
おやすみ
おはよう
こんにちは
ブラウザで表示を確認する

参照記事

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