Girar image con javascript

Necesito rotar una image con javascript en intervalos de 90 grados. He intentado algunas bibliotecas como jQuery rotar y Raphaël , pero tienen el mismo problema: la image gira alnetworkingedor de su centro. Tengo un montón de contenido en todos los lados de la image, y si la image no es perfectamente cuadrada, partes de ella terminarán encima de ese contenido. Quiero que la image permanezca dentro de su div principal, que tiene un set max-with y max-height.

El uso de jQuery gira de esta manera ( http://jsfiddle.net/s6zSn/1073/ ):

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

Resultados en esto:

Cómo funciona la jQuery rotate

Y este es el resultado que me gustaría en su lugar:

Cómo me gustaría que funcionara

Alguien tiene una idea sobre cómo lograr esto?

Utiliza una combinación de transform de CSS (con prefijos de proveedor según sea necesario) y transform-origin , como este: (también en 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://img.javascriptes.com/javascript/zbLrE.png" id="image" /> </div> 
 var angle = 0; $('#button').on('click', function() { angle += 90; $('#image').css('transform','rotate(' + angle + 'deg)'); }); 

Prueba este código

He visto su código de ejecución. Hay una corrección de línea en su código. escribe $ ("# envoltorio"). gira (ángulo); en lugar de $ ("# image"), gire (ángulo); y obtendrás el resultado deseado, espero que esto sea lo que quieras.

Se puede aplicar CSS y tendrá que establecer transform-origin correctamente para get la transformación aplicada de la manera que desee

Mira el violín

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

Código principal :

 /* 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 y 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) ); 

Lógica :

Divida la altura de la image por 2. Los valores de transform-x y transform-y deben ser este valor

Enlace :

origen de transformación en CSS | MDN

¡Espero que esto le pueda ayudar!

 <input type="button" id="left" value="left" /> <input type="button" id="right" value="right" /> <img src="http://img.javascriptes.com/javascript/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> 

Intentalo

Siempre puede aplicar la class CCS con propiedad rotatehttp://css-tricks.com/snippets/css/text-rotation/

Para mantener la image girada dentro de las dimensiones de su div también necesita ajustar CSS, no es necesario usar JavaScript, excepto agregar class.