Een afbeelding roteren in afbeeldingsbron in html

Is er een manier waarop ik de bron van mijn afbeeldingscodes kan toevoegen die mijn afbeelding kunnen draaien?

Zoiets:

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

Ik maak mijn afbeeldingen dynamisch, dus ik vroeg me af of ik wat extra code zou kunnen toevoegen om het te roteren als ik dat wil.

Antwoord 1, autoriteit 100%

Als uw rotatiehoeken redelijk uniform zijn, kunt u CSS gebruiken:

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

Anders kunt u dit doen door een gegevenskenmerk in uw HTML in te stellen en vervolgens Javascript te gebruiken om de benodigde stijl toe te voegen:

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

Voorbeeld 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 
    });
});

Demo:

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

Antwoord 2, autoriteit 68%

U kunt dit doen:

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

het is veel gemakkelijker.

Antwoord 3, autoriteit 4%

Deze CSS lijkt te werken in Safari en Chrome:

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

en in het lichaam:

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

Maar dit (en het .rotate90-voorbeeld hierboven) duwt de geroteerde afbeelding hoger op de pagina dan wanneer deze niet was gedraaid. Ik weet niet zeker hoe de plaatsing van de afbeelding ten opzichte van tekst of andere geroteerde afbeeldingen moet worden geregeld.

Antwoord 4

Dit kan uw scriptvrije oplossing zijn: http://davidwalsh.name/css-transform-rotate

Het wordt ondersteund in alle browsers met een prefix en, in IE10-11 en alle nog steeds gebruikte Firefox-versies, zonder prefix.

Dat betekent dat als je niet om oude IE’s (de vloek van webontwerpers) geeft, je de voorvoegsels -ms-en -moz-kunt overslaan om te besparen ruimte.

De Webkit-browsers (Chrome, Safari, de meeste mobiele navigators) hebben echter nog steeds -webkit-nodig, en er is nog steeds een grote cult-aanhang van pre-Next Opera en het gebruik van -o-is gevoelig.