CSS3 文字と画像の回転、鏡文字

transform: rotate( 角度 ); /* 2D回転 */

transform: rotateX( 角度 ); /* X軸回転 */

transform: rotateY( 角度 ); /* Y軸回転 */

transform: rotateZ( 角度 ); /* Z軸回転 */

----------------------------------------

transform: rotateY( 180deg );

----------------------------------------

transform:matrix(-1, 0, 0, 1, 0, 0);

----------------------------------------

1番目の数値は、水平方向の縮尺（a）

2番目の数値は、垂直方向の傾斜率（b）

3番目の数値は、水平方向の傾斜率（c）

4番目の数値は、垂直方向の縮尺（d）

5番目の数値は、水平方向の移動距離（e）

6番目の数値は、垂直方向の移動距離（f）

----------------------------------------

古いバージョンを利用しているユーザ向けに、

各ベンダープレフィックスを付けなければならない場合がある。

-----------------------------------

-moz-transform: rotate( 90deg ); /* Firefox用 */

-webkit-transform: rotate( 90deg ); /* Chrome,Safari,新しいOpera用 */

-o-transform: rotate( 90deg ); /* 古いOpera用 */

-ms-transform: rotate( 90deg ); /* IE9用 */

transform: rotate( 90deg ); /* CSS3の書き方 */

-----------------------------------

span等のインライン要素は display:inline-block;としないと

効果が出ない。

IEだけに表示させる。

<!--[if 条件式]>
(中身)
<![endif]-->

IE6 IE6だけで見える。
gte IE7 IE7以上で見える。
ｇｔ IE6 IE6より上のバージョンで見える。
lte IE6 IE6以下で見える。
lt IE7 IE7未満で見える。
!IE6 IE


<!--[if lte IE 6 ]>
<link rel="stylesheet" type="text/css" href="ie6.css">
<![endif]-->

IE6以下に反映される。

これはHTML文法上はエラーであるがこんなものもある。

<![if !IE ]>

   <p>この表示はIE以外のブラウザで見えます。</p>

<![endif]>

リンク画像の枠線を消す

<a><img /></a>とした場合ブラウザによっては画像の周りに青い枠がついてしまう。
これを取り除くには、スタイルシートの上の方に以下のスタイルを追加する。

img { border-style:none; }

a img { border-style:none; }