CSSで回転画像を追加するには？

Question

私は以下のコードを書いています。しかし、今度は画像を180度回転させる必要があります。どうすればこれを達成できますか？

#cell { 
background-image: url("../images/logo.PNG"); 
background-attachment: fixed; 
background-repeat: no-repeat; 
background-position: 0px 250px; 
background-color: #FFFFFF; 
border-left: 2px; 
} 

HTMLタグ：

<td width="2%" id="cell"/> 

Answer 1

あなたはそれに​​を使用することができます<td>で任意のテキストを持っていない場合。テキストを持っている場合は、テキストも回転します。 <td>の中に<div>を置くことを防ぐには、その中にテキストを置き、それを180度回転させてください（再び垂直にします）。

デモ：http://jsfiddle.net/ThinkingStiff/jBHRH/

HTML：

<table> 
    <tr><td width="20%" id="cell"><div>right-side up<div></td></tr> 
</table> 

CSS：

#cell { 
    background-image: url(http://thinkingstiff.com/images/matt.jpg); 
    background-repeat: no-repeat; 
    background-size: contain; 
    color: white; 
    height: 150px; 
    transform: rotate(180deg); 
    width: 100px; 
} 

#cell div { 
    transform: rotate(180deg);   
} 

出力：

Answer 2

あなたはこのためにCSS3を使用することができますが、一部のブラウザの問題があります。

transform: rotate(180deg); 

もここを見て：CSS3 rotate alternative?

Answer 3

ワンクロスブラウザのソリューションは、IE8のための以下という、

#cell { 
    -webkit-transform: rotate(180deg);  /* Chrome and other webkit browsers */ 
    -moz-transform: rotate(180deg);  /* FF */ 
    -o-transform: rotate(180deg);   /* Opera */ 
    -ms-transform: rotate(180deg);   /* IE9 */ 
    transform: rotate(180deg);    /* W3C compliant browsers */ 

    /* IE8 and below */ 
    filter: progid:DXImageTransform.Microsoft.Matrix(M11=-1, M12=0, M21=0, M22=-1, DX=0, DY=0, SizingMethod='auto expand'); 
} 

注意です回転中心点は画像の中央にはありません（他のすべてのブラウザで発生します）。したがって、IE8以下では、イメージを上下にシフトするために、余白（またはパディング）を使用して再生する必要があります。

要素をブロックする必要があります。使用することができる他の単位は、次のとおりです。 180deg = .5turn = 3.14159rad = 200grad

Answer 4

また、Z軸上のこのアキシャル型の回転や回転を試すことができます。

.box { 
 
    background: url('http://aashish.coolpage.biz/img/about/7.jpg'); 
 
    width: 200px; 
 
    height: 200px; 
 
    transition: transform .5s linear; 
 
    transform-style: preserve-3D; 
 
} 
 

 
.box:hover { 
 
    transform: rotateY(180deg); 
 
}

<div class="box"></div>