How to add a rotated image in CSS? - html

Question

I have written below code. But now the requirement is that the image should be rotated 180 degrees. How can I achieve this?
#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 tag:
<td width="2%" id="cell"/>

Answer 1

One cross-browser solution is
#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');
}
Note, that for IE8 and below, the rotation center point is not located in the center of the image (as it happens with all other browsers). So, for IE8 and below, you need to play with negative margins (or paddings) to shift the image up and left.
The element needs to be blocked. Other units that can be used are:
180deg = .5turn = 3.14159rad = 200grad

Answer 2

If you don't have any text in the <td> you can use transform: rotate(180deg); on it. If you do have text, this will rotate the text too. To prevent that you can put a <div> inside the <td>, put the text inside that, and rotate that 180 degrees (which puts it upright again).
Demo: 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);
}
Output:

Answer 3

You can also try this axial type rotation OR rotation on Z-axis.
.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>

Answer 4

You can use CSS3 for this, but there are some browser issues:
transform: rotate(180deg);
Also look here: CSS3 rotate alternative?