CSS3 회전은 어느 축을 중심으로 회전합니까?-CSS 튜토리얼-php.cn

CSS3 회전은 어느 축을 중심으로 회전합니까?

WBOY

풀어 주다： 2021-12-16 17:38:58

원래의

3358명이 탐색했습니다.

Css3에는 여러 가지 회전 상황이 있습니다. 1. "rotateX()" 함수에 의해 구현된 회전은 X축을 기준으로 합니다. 2. "rotateY()" 함수에 의해 구현된 회전은 Y축을 기준으로 합니다. . "rotateZ()" 함수는 Z축을 중심으로 회전합니다. 4. "rotate()" 함수는 원점을 중심으로 회전합니다.

CSS3 회전은 어느 축을 중심으로 회전합니까?

이 튜토리얼의 운영 환경: Windows 10 시스템, CSS3&&HTML5 버전, Dell G3 컴퓨터.

css3 회전은 어느 축에 관한 것입니다

CSS에서는 시계 방향, 시계 반대 방향 또는 X, Y 또는 Z 축을 기준으로 회전할 수 있습니다. 다양한 회전 스타일은 다양한 기능에 해당합니다.

1. "rotate()" 기능

요소를 시계 방향이나 시계 반대 방향으로 회전하려면 "rotate()" 기능을 사용하세요.

예제는 다음과 같습니다.

<html>
<head>
<style> 
div
{
margin:30px;
width:200px;
height:100px;
background-color:yellow;
/* 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>Hello World</div>
</body>
</html>

로그인 후 복사

출력 결과:

CSS3 회전은 어느 축을 중심으로 회전합니까?

2. "rotateX()" 기능

"rotateX()" 기능을 사용하여 X축을 기준으로 요소를 회전합니다.

<html>
<head>
<style> 
img{
transform:rotatex(180deg);
}
</style>
</head>
<body>
<img src="1118.02.png" alt="">
</body>
</html>

로그인 후 복사

출력 결과:

CSS3 회전은 어느 축을 중심으로 회전합니까?

3. "rotateY()" 함수

"rotateY()" 함수를 사용하여 Y축을 기준으로 요소를 회전합니다. 다음과 같습니다:

<html>
<head>
<style> 
img{
transform:rotateY(180deg);
}
</style>
</head>
<body>
<img src="1118.02.png" alt="">
</body>
</html>

로그인 후 복사

출력 결과:

CSS3 회전은 어느 축을 중심으로 회전합니까?

4. "rotateZ()" 기능

"rotateZ()" 기능을 사용하여 Z 축을 중심으로 요소를 회전합니다. 예시는 다음과 같습니다:

<html>
<head>
<style> 
img{
transform:rotateZ(180deg);
}
</style>
</head>
<body>
<img src="1118.02.png" alt="">
</body>
</html>

로그인 후 복사

출력 결과:

CSS3 회전은 어느 축을 중심으로 회전합니까?

(학습 영상 공유: css 영상 튜토리얼)

위 내용은 CSS3 회전은 어느 축을 중심으로 회전합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!