>  기사  >  웹 프론트엔드  >  CSS 이미지를 회전할 수 있나요?

CSS 이미지를 회전할 수 있나요?

藏色散人
藏色散人원래의
2021-01-12 10:38:563892검색

CSS 이미지는 CSS에서 회전할 수 있습니다. 변환 속성을 사용하고 값을 "rotate(angle)", "rotate3d(x,y,z,angle)", "rotateX(angle)" 또는 " RotateY(angle) )" 등을 사용하여 이미지를 회전합니다.

CSS 이미지를 회전할 수 있나요?

이 튜토리얼의 운영 환경: 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 이미지를 회전할 수 있나요?

위 내용은 CSS 이미지를 회전할 수 있나요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.