CSS로 이미지를 90도 회전하는 방법은 무엇입니까? (코드 예)

이 글의 내용은 CSS로 이미지를 90도 회전시키는 방법에 관한 것입니다. (코드 예)에는 특정 참고 값이 있습니다. 도움이 필요한 친구가 참고할 수 있기를 바랍니다.

Firefox 아래:

-moz-transform:rotate(-90deg);
-webkit-transform:rotate(-90deg);

ie Under:

filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=3);

앞에 길고 복잡한 대문자와 소문자 부분은 걱정할 필요가 없습니다. =3"이 뒷면에 있습니다. 이것이 핵심입니다. , 여기의 매개변수는 0, 1, 2, 3일 수 있으며 4는 없습니다. 4, 5 등이면 그림이 회전하지 않습니다.

회전 각도에 90(π/2)을 곱하면 됩니다. 따라서 "rotation=3"은 270도의 시계 방향 회전을 의미하며 이는 변환:회전(270deg);과 같은 의미입니다. 따라서 여기에는 몇 가지 작은 제한이 있습니다. 어떤 각도에서도 회전할 수 없으며 90도, 180도 및 270도만 회전할 수 있습니다.

그러나 IE 브라우저는 어떤 각도에서든 회전을 달성하기 위한 방법이 있지만 위의 것보다 더 번거롭고 이해하기 어렵습니다.

데모는 다음과 같습니다.

<style >
  img{
  margin:100px auto  0;
  -moz-transform:rotate(-90deg);
  -webkit-transform:rotate(-90deg);
   filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=3);    
 
  }
</style>
<img src="images/006.gif" alt="" />

위는 CSS로 이미지를 90도 회전시키는 방법인가요? (코드 예제) 전체 소개, CSS3 비디오 튜토리얼에 대해 더 알고 싶다면 PHP 중국어 웹사이트를 주목하세요.

위 내용은 CSS로 이미지를 90도 회전하는 방법은 무엇입니까? (코드 예)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!