朝顔日記

終了しました。

記念に Firefox 3.6a1pre でのスクリーンショットをおいておきます。

• スクリーンショット(png イメージ 38.5KB)

なお、はてなブックマークでネタの解説を希望しておられる方がおられるので簡単解説してみます。

現在策定中の CSS3 に transform というプロパティがありまして、これを使って指定したセレクタのコンテンツに変形を加えています。具体的には、以下のような感じです。

h1 {
  -webkit-transform: scale(-1, -1);
  -moz-transform: scale(-1, -1);
  transform: scale(-1, -1);
}

これで、対応した UA では上下反転して表示されるようです。 -webkit- や -moz- などのプレフィックスがついているのは、仕様自体がまだ策定中のため、webkit や Gecko などのレンダリングエンジンも独自拡張という形で実装しているためです。CSS3 の transform についての詳しいことは CSS 2D Transforms Module Level 3 をご覧ください。

以上簡単な解説でした。終わり。