37

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"/>
2

4 Answers 4

66

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

5
  • I do understand why these are all the same: 180deg, .5turn and 3.14159rad but I do not understand why 200rad is the same like the rest, can anyone explain?
    – Kevkong
    Aug 1, 2017 at 10:59
  • @Kevkong Sorry, it was a typo. I meant 200grad. Thanks for pointing that out Aug 1, 2017 at 11:28
  • 1
    Oh it was not my intention to point that out. I was seriously interested, but as soon as you wrote "grad" I remembered my math class back from school and a little bit of googling answered my question.
    – Kevkong
    Aug 1, 2017 at 11:40
  • It will be interesting to find how the newer browsers have it implemented in 2019. I don't think we'll need to support IE8 and below anymore.
    – Mahin Khan
    Feb 8, 2019 at 16:44
  • @MahinKhan Nowadays most browsers understand the transform. This means that the old habit of preceding each CSS property with their vendor prefixes was a future-proof concept that we see still works today. In fact, just because most browsers do not need anymore these prefixes, nothing should be changed, as not every user upgrades their browsers. Feb 10, 2019 at 11:52
8

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:

enter image description here

4

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>

2

You can use CSS3 for this, but there are some browser issues:

transform: rotate(180deg);

Also look here: CSS3 rotate alternative?

Your Answer

Reminder: Answers generated by Artificial Intelligence tools are not allowed on Stack Overflow. Learn more

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.