Поворот изображения с помощью javascript

Мне нужно повернуть изображение с помощью JavaScript с интервалом в 90 градусов. Я пробовал несколько библиотек, таких как jQuery rotate и Raphaël, но у них одна и та же проблема - изображение вращается вокруг своего центра. У меня есть куча контента со всех сторон изображения, и если изображение не совсем квадратное, его части окажутся поверх этого контента. Я хочу, чтобы изображение оставалось внутри родительского элемента div, для которого установлены max-with и max-height.

Используя jQuery, вращайте вот так (http://jsfiddle.net/s6zSn/1073/):

var angle = 0;
$('#button').on('click', function() {
    angle += 90;
    $("#image").rotate(angle);
});

Результаты в этом:

И вот результат, который я хотел бы получить:

У кого-нибудь есть идея, как этого добиться?

Ответы

Ответ 1

Вы используете комбинацию CSS transform (с приставками поставщика по мере необходимости) и transform-origin, например: (также на jsFiddle)

var angle = 0,
  img = document.getElementById('container');
document.getElementById('button').onclick = function() {
  angle = (angle + 90) % 360;
  img.className = "rotate" + angle;
}

#container {
  width: 820px;
  height: 100px;
  overflow: hidden;
}
#container.rotate90,
#container.rotate270 {
  width: 100px;
  height: 820px
}
#image {
  transform-origin: top left;
  /* IE 10+, Firefox, etc. */
  -webkit-transform-origin: top left;
  /* Chrome */
  -ms-transform-origin: top left;
  /* IE 9 */
}
#container.rotate90 #image {
  transform: rotate(90deg) translateY(-100%);
  -webkit-transform: rotate(90deg) translateY(-100%);
  -ms-transform: rotate(90deg) translateY(-100%);
}
#container.rotate180 #image {
  transform: rotate(180deg) translate(-100%, -100%);
  -webkit-transform: rotate(180deg) translate(-100%, -100%);
  -ms-transform: rotate(180deg) translateX(-100%, -100%);
}
#container.rotate270 #image {
  transform: rotate(270deg) translateX(-100%);
  -webkit-transform: rotate(270deg) translateX(-100%);
  -ms-transform: rotate(270deg) translateX(-100%);
}

<button id="button">Click me!</button>
<div id="container">
  <img src="http://i.stack.imgur.com/zbLrE.png" id="image" />
</div>

Ответ 2

var angle = 0;
$('#button').on('click', function() {
    angle += 90;
    $('#image').css('transform','rotate(' + angle + 'deg)');
});

Попробуйте этот код.

Ответ 3

Я видел ваш работающий код. В вашем коде есть одна строка исправления.

Запись:

$("#wrapper").rotate(angle);

вместо:

$("#image").rotate(angle);

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

Ответ 4

CSS может применяться, и вам нужно будет правильно установить transform-origin, чтобы получить прикладное преобразование так, как вы хотите

Смотрите скрипку:

http://jsfiddle.net/OMS_/gkrsz/

Основной код:

/* assuming that the image height is 70px */

img.rotated {
    transform: rotate(90deg);
    -webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    -ms-transform: rotate(90deg);

    transform-origin: 35px 35px;
    -webkit-transform-origin: 35px 35px;
    -moz-transform-origin: 35px 35px;
    -ms-transform-origin: 35px 35px;
}

jQuery и JS:

$(img)
    .css('transform-origin-x', imgWidth / 2)
    .css('transform-origin-y', imgHeight / 2);

// By calculating the height and width of the image in the load function

// $(img).css('transform-origin', (imgWidth / 2) + ' ' + (imgHeight / 2) );

Логика

Разделите высоту изображения на 2. Значениями transform-x и transform-y должно быть это значение

Ссылка:

transform-origin в CSS | MDN

Ответ 5

Надеюсь, это поможет вам!

<input type="button" id="left"  value="left" />
<input type="button" id="right" value="right" />
<img src="https://www.google.com/images/srpr/logo3w.png" id="image">

<script>
 var angle = 0;
    $('#left').on('click', function () {  
        angle -= 90;
        $("#image").rotate(angle);
    });

    $('#right').on('click', function () {  
        angle += 90;
        $("#image").rotate(angle);
    });
</script>

Попробуйте

Ответ 6

Вы всегда можете применить класс CCS с свойством rotate - http://css-tricks.com/snippets/css/text-rotation/

Чтобы сохранить развернутое изображение в ваших измерениях div, вам нужно также настроить CSS, нет необходимости использовать JavaScript, кроме добавления класса.

Ответ 7

Нет необходимости в jQuery и много CSS больше (обратите внимание, что некоторым браузерам нужен дополнительный CSS)

Вид того, что @Abinthaha отправил, но чистый JS, без необходимости jQuery.

let rotateAngle = 90;

function rotate(image) {
  image.setAttribute("style", "transform: rotate(" + rotateAngle + "deg)");
  rotateAngle = rotateAngle + 90;
}

#rotater {
  transition: all 0.3s ease;
  border: 0.0625em solid black;
  border-radius: 3.75em;
}

<img id="rotater" onclick="rotate(this)" src="https://upload.wikimedia.org/wikipedia/en/e/e0/Iron_Man_bleeding_edge.jpg"/>

Ответ 8

Основываясь на ответе Anuga, я расширил его до нескольких изображений.

Следите за углом поворота изображения как атрибутом изображения.

function rotate(image) {
  let rotateAngle = Number(image.getAttribute("rotangle")) + 90;
  image.setAttribute("style", "transform: rotate(" + rotateAngle + "deg)");
  image.setAttribute("rotangle", "" + rotateAngle);
}

.rotater {
  transition: all 0.3s ease;
  border: 0.0625em solid black;
  border-radius: 3.75em;
}

<img class="rotater" onclick="rotate(this)" src="https://upload.wikimedia.org/wikipedia/en/e/e0/Iron_Man_bleeding_edge.jpg"/>
<img class="rotater" onclick="rotate(this)" src="https://upload.wikimedia.org/wikipedia/en/e/e0/Iron_Man_bleeding_edge.jpg"/>
<img class="rotater" onclick="rotate(this)" src="https://upload.wikimedia.org/wikipedia/en/e/e0/Iron_Man_bleeding_edge.jpg"/>

Ответ 9

Я думаю, что это будет работать.

    document.getElementById('#image').style.transform = "rotate(90deg)";

Надеюсь, это поможет. Это работает со мной.