CSS로 이미지를 회전하는 방법: 먼저 HTML 샘플 파일을 만든 다음 본문에 div를 만들고 마지막으로 CSS3의 변환 속성을 사용하여 요소를 회전, 크기 조정, 이동 또는 기울입니다.
이 기사의 운영 환경: Windows7 시스템, HTML5&&CSS3 버전, Dell G3 컴퓨터.
CSS로 이미지를 회전하는 방법은 무엇입니까?
CSS에서 이미지 회전 효과를 설정하려면 CSS3의 변환 속성을 사용할 수 있습니다. 변환 속성은 요소에 2D 또는 3D 변환을 적용합니다. 이 속성을 사용하면 요소를 회전, 크기 조정, 이동 또는 기울일 수 있습니다.
transform 속성:
사용 구문:
transform: none|transform-functions;
Internet Explorer 10, Firefox 및 Opera는 변환 속성을 지원합니다.
Internet Explorer 9에서는 대체 -ms-transform 속성을 지원합니다(2D 변환에만 해당).
Safari와 Chrome은 대체 -webkit-transform 속성(3D 및 2D 변환)을 지원합니다.
Opera는 2D 변환만 지원합니다.
예:
<!DOCTYPE html>
<html>
<head>
<style>
div
{
margin:30px;
width:200px;
height:300px;
background-image:url(img/3.jpg);
/* Rotate div */
transform:rotate(9deg);
-ms-transform:rotate(9deg); /* Internet Explorer */
-moz-transform:rotate(9deg); /* Firefox */
-webkit-transform:rotate(9deg); /* Safari 和 Chrome */
-o-transform:rotate(9deg); /* Opera */
}
</style>
</head>
<body>
<div></div>
</body>
</html>렌더링:
[추천 학습: css 비디오 튜토리얼]
위 내용은 CSS로 사진을 회전하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
