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

Я написал код ниже. Но теперь требование состоит в том, чтобы изображение было повернуто на 180 градусов. Как я могу это достичь?Как добавить повернутое изображение в CSS?

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

источник

2012-01-20 user968880

не могли бы вы сделать это в программе манипуляции изображения (GIMP, PhotoShop, и т.д.) вместо этого, или вы должны иметь исходное изображение, как сейчас? – Bojangles

http://stackoverflow.com/questions/1526448/rotating-an-image-using-css это может вам помочь –

Если у вас нет какой-либо текст в <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);   
}

Выход:

enter image description here

источник

2012-01-20 09:35:15 ThinkingStiff

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

transform: rotate(180deg);

Также смотрите здесь: CSS3 rotate alternative?

источник

2012-01-20 09:35:34

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

#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

источник

2012-01-20 09:35:56

Я понимаю, почему все они одинаковы: 180deg, .5turn и 3.14159rad, но я не понимаю, почему 200rad так же, как и все остальные, может кто-нибудь объяснить? – Kevkong

@Kevkong Извините, это была опечатка. Я имел в виду «200 град». Спасибо, что указали, что нет. –

О, это не мое намерение указать на это. Мне было очень интересно, но как только вы написали «град», я вспомнил свой математический класс из школы, и на мой вопрос ответил небольшой вопрос. – Kevkong

Вы также можете попробовать это осевое вращение типа или вращение на 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>

источник

2017-11-03 11:59:04 Aashish

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

ответ

Смежные вопросы