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"/>
BalusC
  • 1,082,665
  • 372
  • 3,610
  • 3,555
user968880
  • 645
  • 2
  • 10
  • 17

4 Answers4

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

Jose Rui Santos
  • 15,009
  • 9
  • 58
  • 71
  • 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 01 '17 at 10:59
  • @Kevkong Sorry, it was a typo. I meant `200grad`. Thanks for pointing that out – Jose Rui Santos Aug 01 '17 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 01 '17 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 08 '19 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. – Jose Rui Santos Feb 10 '19 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

ThinkingStiff
  • 64,767
  • 30
  • 146
  • 239
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>
Aashish Kumar
  • 2,771
  • 3
  • 28
  • 43
2

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

transform: rotate(180deg);

Also look here: CSS3 rotate alternative?

Community
  • 1
  • 1
Florian Rachor
  • 1,574
  • 14
  • 31