CODEWITHSUNDEEP
htmlcss
user968880
user968880

Reputation: 645

How to add a rotated image in CSS?

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

Upvotes: 37

Views: 74032

Answers (4)

Aashish Kumar
Aashish Kumar

Reputation: 2879

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>

Upvotes: 4

Jose Rui Santos
Jose Rui Santos

Reputation: 15329

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

Upvotes: 67

ThinkingStiff
ThinkingStiff

Reputation: 65381

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

Upvotes: 8

Florian Rachor
Florian Rachor

Reputation: 1574

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

transform: rotate(180deg);

Also look here: CSS3 rotate alternative?

Upvotes: 2

Related Questions