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

Question

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

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

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

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

Answer 1

Вы можете использовать комбинацию CSS's transform (с приставками поставщика в случае необходимости) и transform-origin, как это: (also on 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>

Answer 2

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

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

Answer 3

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

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

Answer 4

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

Просмотреть скрипку:

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

Главный код:

/* assuming that the image's 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)); 

Logic:

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

Ссылка:

transform-origin в CSS | MDN

Answer 5

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

Answer 6

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

<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> 

Try it