CSS 이미지는 CSS에서 회전할 수 있습니다. 변환 속성을 사용하고 값을 "rotate(angle)", "rotate3d(x,y,z,angle)", "rotateX(angle)" 또는 " RotateY(angle) )" 등을 사용하여 이미지를 회전합니다.
이 튜토리얼의 운영 환경: Windows7 시스템, HTML5&&CSS3 버전, Dell G3 컴퓨터.
권장: css 비디오 튜토리얼
Transform 속성은 요소의 2D 또는 3D 변형에 적용됩니다. 이 속성을 사용하면 요소를 회전, 크기 조정, 이동, 기울이기 등을 할 수 있습니다.
구문:
transform: rotate(angle)|rotate3d(x,y,z,angle)|rotateX(angle)|rotateY(angle)|rotateZ(angle)
rotate(angle): 2D 회전을 정의하고 매개변수에 각도를 지정합니다.
rotate3d(x,y,z,angle): 3D 회전을 정의합니다.
rotateX(angle): X축을 따라 3D 회전을 정의합니다.
rotateY(angle): Y축을 따라 3D 회전을 정의합니다.
rotateZ(angle): Z축을 따라 3D 회전을 정의합니다.
예:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <style> body { margin:30px; background-color:#E9E9E9; } div.polaroid { width:294px; padding:10px 10px 20px 10px; border:1px solid #BFBFBF; background-color:white; /* Add box-shadow */ box-shadow:2px 2px 3px #aaaaaa; } div.rotate_left { float:left; -ms-transform:rotate(7deg); /* IE 9 */ -webkit-transform:rotate(7deg); /* Safari and Chrome */ transform:rotate(7deg); } div.rotate_right { float:left; -ms-transform:rotate(-8deg); /* IE 9 */ -webkit-transform:rotate(-8deg); /* Safari and Chrome */ transform:rotate(-8deg); } </style> </head> <body> <div class="polaroid rotate_left"> <img src="pulpitrock.jpg" alt="" width="284" style="max-width:90%"> <p class="caption">The pulpit rock in Lysefjorden, Norway.</p> </div> <div class="polaroid rotate_right"> <img src="cinqueterre.jpg" alt="" width="284" style="max-width:90%"> <p class="caption">Monterosso al Mare. One of the five villages in Cinque Terre.</p> </div> </body> </html>
렌더링:
위 내용은 CSS 이미지를 회전할 수 있나요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!