Gire la imagen hacia la derecha o hacia la izquierda dentro de un div usando javascript

Question

HI, ¿Hay alguna manera de rotar una imagen dentro de un div en sentido horario o antihorario?

Tengo un div principal de ancho fijo [desbordamiento establecido en oculto] con imágenes cargadas desde la base de datos. Hay una barra de desplazamiento para mostrar las imágenes dentro de div. Cuando se hace clic en la imagen, entonces necesito mostrar la animación giratoria en sentido horario o antihorario.

Lo he hecho usando el filtro Matrix. Me gustaría saber si se puede hacer en IE solo sin usar ningún filtro.

Answer 1

intente esto: http://raphaeljs.com/image-rotation.html

utiliza tela, sino también es compatible con IE

Answer 2

La única forma en que puedo pensar para rotar imágenes en el lado del cliente en IE es usando filtros. Para versiones algo recientes, los otros navegadores pueden usar el <canvas> control.

Su alternativa es utilizar un script del lado del servidor para rotar la imagen. A continuación, puede enviar la información sobre cómo hacerlo girar con JavaScript (es decir, generar una ruta a la imagen como /rotate?image=img.jpg & cantidad = 90)

Answer 3

CSS3 supports rotation, pero it isn't widely supported. Como solicitó la solución de JavaScript, here's one, pero no creo que pueda obtener imágenes fluidas.

Answer 4

Si estás usando jQuery, jQueryRotate es un pequeño (menos de 3Kb miniaturizada + gzip) plugin que rota las imágenes:

http://jqueryrotate.com/

Answer 5

Hay otra manera de rotar imágenes sin filtros/html5 .. es desagradable e inútil en el mundo real, pero es posible.

Puede almacenar su imagen como una matriz de píxeles, para javascript. Escriba la función para realizar la rotación con ella y codificarla en base64 datauri, bmp podría ser fácil y reemplazar image.src con ella.

Habrá alguna limitación sobre el tamaño del archivo y el apoyo en el navegador de edad y, por supuesto desempeño terrible ..