tamaño - insertar imagen html url

Girar una imagen en la fuente de la imagen en html

Question

¿Hay alguna manera de agregar en la fuente de mis códigos de imagen que podría rotar mi imagen?

Algo como esto:

<img id="image_canv" src="/image.png" rotate="90">

Estoy haciendo que mis imágenes sean dinámicas, así que me preguntaba si podría agregar algún código adicional para rotarlo si así lo quisiera.

Answer 1

Esta podría ser su solución sin script: http://davidwalsh.name/css-transform-rotate

Es compatible con todos los navegadores con prefijo y, en IE10-11 y todas las versiones de Firefox aún usadas, sin prefijo.

Eso significa que si no te importan las IEs antiguas (la pesadilla de los diseñadores web) puedes omitir los prefijos -ms- y -moz- para economizar espacio.

Sin embargo, los navegadores Webkit (Chrome, Safari, la mayoría de los navegadores móviles) todavía necesitan -webkit- , y todavía hay un gran culto de pre-Next Opera y el uso de -o- es sensate.

Answer 2

Este CSS parece funcionar en Safari y Chrome:

div#div2
{
-webkit-transform:rotate(90deg); /* Chrome, Safari, Opera */
transform:rotate(90deg); /* Standard syntax */
}

y en el cuerpo:

<div id="div2"><img src="image.jpg"  ></div>

Pero este (y el ejemplo .rotate90 anterior) empuja la imagen girada más arriba en la página que si no se girara. No estoy seguro de cómo controlar la ubicación de la imagen en relación con el texto u otras imágenes giradas.

Answer 3

Hay un complemento para esto con Javascript.

Compruebe https://code.google.com/p/jqueryrotate/ out.

Answer 4

Puedes hacerlo:

<img src="your image" style="transform:rotate(90deg);">

es mucho más fácil.

Answer 5

Si sus ángulos de rotación son bastante uniformes, puede usar CSS:

<img id="image_canv" src="/image.png" class="rotate90">

CSS:

.rotate90 {
    -webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    -o-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    transform: rotate(90deg);
}

De lo contrario, puede hacer esto configurando un atributo de datos en su HTML, luego usando Javascript para agregar el estilo necesario:

<img id="image_canv" src="/image.png" data-rotate="90">

Muestra jQuery:

$(''img'').each(function() {
    var deg = $(this).data(''rotate'') || 0;
    var rotate = ''rotate('' + deg + ''deg)'';
    $(this).css({ 
        ''-webkit-transform'': rotate,
        ''-moz-transform'': rotate,
        ''-o-transform'': rotate,
        ''-ms-transform'': rotate,
        ''transform'': rotate 
    });
});

Manifestación:

http://jsfiddle.net/verashn/6rRnd/5/