画像の回転と反転

css 3は画像の回転を実現する
transformプロパティには多くの使い方がありますが、その1つがtranslate(回転)です.translateは、オブジェクトを角度に基づいて回転させ、インライン要素とブロックレベル要素に使用することができ、クールな効果を実現することができます.
宝を洗うネットはcss 3とHTML 5を使ってすでにとても长い时间、宝を洗うこのアイコンの回転はwebkitカーネルのブラウザだけを支持するようで、実はIEの下でフィルターを使っても実现することができます.

img{
      -webkit-transform: rotate(-90deg);
      -moz-transform: rotate(-90deg);
      -o-transform: rotate(-90deg);
      filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
}

IE 8(非標準モード)では、「filter」ではなく「-ms-filter」と書く必要があることに注意してください.
ブラウザのサポート
ブラウザのtranslateに対するサポートは驚くほど広範です.上のCSSクリップでは、-webkit-と-moz-接頭辞を直接付けて、#nav要素を-90度回転します.
かなり簡単ですよね?唯一の問題は、IEがサポートしていない場合、多くのデザイナーがそれを使用したくないという重要な設計要素です.
幸いなことに、IEにはこの方面のフィルタがあります:グラフィック回転フィルタ.0、1、2、3の4つの回転値があります.WebkitやGeckoと同様の精密な制御は得られませんが、少なくともある程度は統一されています(IE 6).このフィルターは4つの値しかサポートされていないので、少し気になりますが、IEにとっては、なしに勝るでしょう.
また、Operaは先日、CSS 3のtransitionとtransformをサポートすると発表した.プライベート属性、すなわち接頭辞-o-を使用する必要があります.
DEMOは当駅の右側のマイクロブログの小さいアイコンを見ます
 

/*    */
.flipx {
    -moz-transform:scaleX(-1);
    -webkit-transform:scaleX(-1);
    -o-transform:scaleX(-1);
    transform:scaleX(-1);
    /*IE*/
    filter:FlipH;
}

/*    */
.flipy {
    -moz-transform:scaleY(-1);
    -webkit-transform:scaleY(-1);
    -o-transform:scaleY(-1);
    transform:scaleY(-1);
    /*IE*/
    filter:FlipV;
}