HTML에서 이미지 회전

Sushant Poudel 2023년2월19일

HTML HTML Imgae Rotation

이 기사에서는 HTML에서 이미지를 회전하는 방법을 소개합니다.

`transform` CSS 속성을 사용하여 HTML에서 이미지 회전

CSS transform 속성은 코드의 특정 요소를 수정함을 의미합니다. 변환하려면 외부 리소스(이 경우 변환하는 이미지)가 필요합니다. 이 속성은 요소에 2D 또는 3D 변환을 적용합니다. 또한 이 속성은 세부 사항에 대해 회전, 크기 조정, 이동, 기울이기 등의 권한을 부여합니다. 또한 CSS 시각적 서식 모델의 좌표 공간을 변경합니다. 레이아웃이 CSS 상자 모델에 의해 제어되는 요소는 변환만 가능합니다. transform 속성을 HTML에서 이미지를 회전하는 함수의 단위를 언급하는 rotate() 함수로 설정할 수 있습니다. 이미지를 회전할 값은 함수의 괄호 안에 제공되어야 합니다. deg 단위는 회전 값을 지정하는 데 사용됩니다. 이를 위해 인라인 CSS를 사용할 수 있습니다. CSS는 <img> 태그에서 사용됩니다.

예를 들어 HTML에 <img> 태그가 있는 일반 이미지를 삽입합니다. src 속성을 https://loremflickr.com/320/320으로 설정합니다. 그런 다음 90도 회전을 위해 이미지를 삽입하고 스타일을 추가합니다. 스타일 속성에서 transform 속성을 rotate(90deg)로 설정합니다. 그런 다음 <br> 태그를 추가합니다. 마찬가지로 이미지를 180deg 및 360deg로 회전합니다.

아래 예는 HTML의 이미지 소스에서 이미지를 회전하는 방법을 보여줍니다. <img> 태그의 스타일을 지정했습니다. 이는 삽입된 이미지를 transform:rotate() 속성으로 회전할 수 있음을 의미합니다. 원본 이미지를 삽입하고 이미지를 90, 180 및 360도로 회전했습니다. rotate() 함수에 원하는 각도 값을 쓸 수 있습니다. 예제의 두 번째 이미지는 축의 절반까지 회전합니다. 세 번째 이미지는 180도 회전했기 때문에 거꾸로 보입니다. 이미지가 360도 회전을 완료하면 원본 이미지처럼 보입니다. 따라서 transform() 속성과 rotate() 값을 사용하여 HTML과 CSS를 사용하여 이미지를 회전할 수 있습니다.

예제 코드:

<html>
<body>
 Original Image
 <img src="https://loremflickr.com/320/320" /> <br>
 90 degree Rotation
 <img src="https://loremflickr.com/320/320" style="transform:rotate(90deg);"> <br>
 180 degree Rotation
 <img src="https://loremflickr.com/320/320" style="transform:rotate(180deg);"> <br>
 360 degree Rotation
 <img src="https://loremflickr.com/320/320" style="transform:rotate(360deg);"> <br>
</body>
</html>

작가: Sushant Poudel

Sushant is a software engineering student and a tech enthusiast. He finds joy in writing blogs on programming and imparting his knowledge to the community.

transform CSS 속성을 사용하여 HTML에서 이미지 회전

`transform` CSS 속성을 사용하여 HTML에서 이미지 회전