HTML의 이미지 소스에서 이미지 회전

HTML의 이미지 소스에서 이미지 회전

---

내 이미지를 회전시킬 수있는 내 이미지 코드의 소스를 추가 할 수있는 방법이 있습니까?

이 같은:

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

내 이미지를 동적으로 만들고 있으므로 원하는 경우 회전하는 추가 코드를 추가 할 수 있는지 궁금합니다.

---

회전 각도가 상당히 균일하다면 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);
}

그렇지 않으면 HTML에서 데이터 속성을 설정 한 다음 Javascript를 사용하여 필요한 스타일을 추가하여이를 수행 할 수 있습니다.

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

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

데모:

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

---

다음과 같이 할 수 있습니다.

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

훨씬 쉽습니다.

---

이 CSS는 Safari 및 Chrome에서 작동하는 것 같습니다.

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

그리고 몸에서 :

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

그러나 이것은 (및 위의 .rotate90 예제) 회전 된 이미지를 회전되지 않은 경우보다 페이지에서 더 위로 밀어냅니다. 텍스트 또는 기타 회전 된 이미지를 기준으로 이미지 배치를 제어하는 ​​방법을 잘 모릅니다.

---

이것은 스크립트가없는 솔루션 일 수 있습니다. http://davidwalsh.name/css-transform-rotate

접두사가 붙은 모든 브라우저에서 지원되며, IE10-11과 여전히 사용되는 모든 Firefox 버전에서는 접두사가 없습니다.

즉, 이전 IE (웹 디자이너의 골칫거리)를 신경 쓰지 않으면 -ms-및 -moz-접두사를 건너 뛰어 공간을 절약 할 수 있습니다 .

그러나 웹킷 브라우저 (크롬, 사파리, 대부분의 모바일 내비게이터)는 여전히를 필요 -webkit-로하며, 여전히 넥스트 오페라 이전에 대한 열렬한 컬트 추종자들이 있으며 사용 -o-은 센세이션입니다.

참고 URL : https://stackoverflow.com/questions/20061774/rotate-an-image-in-image-source-in-html