Поворот изображения с помощью 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);
});

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

И это результат, который я хотел бы вместо этого:

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

6 ответов

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


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

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


Я видел ваш текущий код. В вашем коде есть одна коррекция строки. записывать . $( "# Обертка" ) вращать (угол); вместо $( "# image" ). rotate (angle); и вы получите желаемый результат, надеюсь, что это то, что вы хотите.


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


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

Попробуйте


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

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

licensed under cc by-sa 3.0 with attribution.