web-dev-qa-db-fra.com

Faire pivoter une image dans la source d'image en HTML

Est-il possible d'ajouter la source de mes codes d'image à la rotation de mon image?

Quelque chose comme ça:

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

Je rends mes images dynamiques, donc je me demandais si je pouvais ajouter du code supplémentaire pour le faire pivoter si je le voulais.

htmlimagerotationsrc
58
marchemike

Si vos angles de rotation sont assez uniformes, vous pouvez utiliser 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);
}

Sinon, vous pouvez le faire en définissant un attribut de données dans votre code HTML, puis en utilisant Javascript pour ajouter le style nécessaire:

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

Exemple de 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 
    });
});

Démo:

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

80
VLS

Tu peux le faire:

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

c'est beaucoup plus facile.

27
user9770563

Ce CSS semble fonctionner dans Safari et Chrome:

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

et dans le corps:

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

Mais ceci (et l'exemple .rotate90 ci-dessus) pousse l'image pivotée plus haut sur la page que si elle ne l'était pas. Vous ne savez pas comment contrôler le placement de l'image par rapport au texte ou à d'autres images pivotées.

2
chuckkahn

Il existe un plugin pour cela avec Javascript.

Vérifiez https://code.google.com/p/jqueryrotate/ out.

0
Hozikimaru

Cela pourrait être votre solution sans script: http://davidwalsh.name/css-transform-rotate

Il est pris en charge dans tous les navigateurs préfixés et, dans IE10-11 et toutes les versions de Firefox encore utilisées, sans préfixe.

Cela signifie que si vous ne vous souciez pas des anciens IE (le fléau des concepteurs Web), vous pouvez ignorer les préfixes -ms- et -moz- pour économiser de l'espace.

Cependant, les navigateurs Webkit (Chrome, Safari, la plupart des navigateurs mobiles) ont toujours besoin de -webkit-, et il y a encore un grand culte de pré-Suivant Opera et d'utiliser -o- est sensé .

0
gchiconi