Как добавить повернутое изображение в CSS?

Я написал код ниже. Но теперь требование состоит в том, чтобы изображение было повернуто на 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"/>

Ответ 1

Одно кросс-браузерное решение

#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 и ниже точка центра вращения не расположена в центре изображения (как это происходит со всеми другими браузерами). Итак, для IE8 и ниже вам нужно сыграть с отрицательными полями (или paddings), чтобы сдвинуть изображение вверх и влево.

Элемент должен быть заблокирован. Другие единицы, которые могут быть использованы: 180deg= .5turn= 3.14159rad= 200grad

Ответ 2

Если у вас нет текста в <td>, вы можете использовать transform: rotate(180deg); на нем. Если у вас есть текст, это также повернет текст. Чтобы предотвратить возможность размещения <div> внутри <td>, поместите текст внутри этого и поверните на 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);        
}

Вывод:

Ответ 3

Вы можете использовать CSS3 для этого, но есть некоторые проблемы с браузером:

transform: rotate(180deg);

Также смотрите здесь: CSS3 вращать альтернативу?

Ответ 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>