Поворот изображения в источнике изображения в html

Есть ли способ, который я мог бы добавить в источник моих кодов изображений, которые могли бы вращать изображение?

Что-то вроде этого:

<img id="image_canv" src="/image.png" rotate="90">

Я делаю свои изображения динамичными, поэтому мне было интересно, могу ли я добавить дополнительный код, чтобы повернуть его, если захочу.

Ответы

Ответ 1

Если ваши углы поворота достаточно однородны, вы можете использовать CSS:

<img id="image_canv" src="/image.png" class="rotate90">

CSS

.rotate90 {
    -webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    -o-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    transform: rotate(90deg);
}

В противном случае вы можете сделать это, установив атрибут данных в свой HTML, а затем с помощью Javascript добавьте необходимый стиль:

<img id="image_canv" src="/image.png" data-rotate="90">

Пример jQuery:

$('img').each(function() {
    var deg = $(this).data('rotate') || 0;
    var rotate = 'rotate(' + deg + 'deg)';
    $(this).css({ 
        '-webkit-transform': rotate,
        '-moz-transform': rotate,
        '-o-transform': rotate,
        '-ms-transform': rotate,
        'transform': rotate 
    });
});

Демо:

http://jsfiddle.net/verashn/6rRnd/5/

Ответ 3

Это может быть ваше решение script -бесплатное: http://davidwalsh.name/css-transform-rotate

Он поддерживается во всех браузерах с префиксом, а в IE10-11 и все еще неиспользуемые версии Firefox - без изменений.

Это означает, что если вам не нужны старые IE (проклятие веб-дизайнеров), вы можете пропустить префиксы -ms- и -moz- для экономии места.

Однако для браузеров Webkit (Chrome, Safari, большинство мобильных навигаторов) по-прежнему требуется -webkit-, и существует еще большой культ, следующий за предыдущей Opera и использующий -o-.

Ответ 4

Этот CSS, похоже, работает в Safari и Chrome:

div#div2
{
-webkit-transform:rotate(90deg); /* Chrome, Safari, Opera */
transform:rotate(90deg); /* Standard syntax */
}

и в теле:

<div id="div2"><img src="image.jpg"  ></div>

Но это (и пример .rotate90 выше) подталкивает повернутое изображение выше на странице, чем если бы оно не было повернуто. Не знаете, как управлять размещением изображения относительно текста или других повернутых изображений.