CSS3で文字を斜めにしてみたよ

はてなダイアリーでは、デザインの変更をCSSを使う分には、かなり自由に設定できます。
最近書籍でも扱いが増えてきたように思える、CSS3の情報を調べてみると、これまでJavascriptを使わないとできなかった事が実現できるようです。はてなダイアリーだと、Javascriptの使用は厳しく制限されています。
そこで、ちょっとずつ新機能を導入してみました。
まずは、「CSS3大接近：第3回　transformプロパティ｜gihyo.jp … 技術評論社 （ http://gihyo.jp/design/feature/01/css3-approach/0003?page=1 ）を参考に、ブログ記事のカテゴリを、斜めにしてみる・・・できた！ FireFoxで確認。

あれ、でも Google Chrome や Safari 、IE8 では全くだめ。
もしや、と思い、対象を display: inline-block としたら、Google Chrome と Safari では解決。
W3Cの文書では、インラインでも大丈夫と書いてあるのにな。

• CSS 2D Transforms Module Level 3 http://dev.w3.org/csswg/css3-2d-transforms/#transform-property

IEは悲しい結果に。うーむ。

結局、IEユーザーにはかっこ悪いけど、こんな感じです。

.sectioncategory {
  display: inline-block;
  max-width: 8em;
  background: url('http://d.hatena.ne.jp/theme/hatena_machiya-green/hatena-modulebody2.gif') repeat scroll 0 0 #ECEAC9;
  transform: rotate(-10grad);
  -moz-transform: rotate(-10grad);
  -webkit-transform: rotate(-10grad);
}