Поверніть зображення у джерелі зображення у форматі html

Question 1

Чи є спосіб, який я міг би додати у джерело своїх кодів зображень, який міг би повертати моє зображення?

Щось на зразок цього:

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

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

Question 2

Якщо кути повороту досить рівномірні, ви можете використовувати 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/

Question 3

Ви можете зробити це:

<img src="your image" style="transform:rotate(90deg);">

це набагато простіше.

Question 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 вище) штовхає повернене зображення вище на сторінці, ніж якщо б воно не поверталось. Не знаю, як керувати розміщенням зображення щодо тексту або інших повернутих зображень.

Question 5

Це може бути вашим рішенням без сценаріїв: http://davidwalsh.name/css-transform-rotate

Він підтримується у всіх браузерах із префіксом, а в IE10-11 та у всіх версіях Firefox, які все ще використовуються, без префіксів.

Це означає, що якщо ви не дбаєте про старі IE (нагромадження веб-дизайнерів), ви можете пропустити префікси -ms-та, -moz-щоб заощадити простір.

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