CSS3에서 회전 회전점을 설정하는 방법
- WBOY원래의
- 2022-03-21 15:27:215456검색
CSS3에서는 "transform-origin" 속성을 사용하여 요소를 회전할 때 회전 지점을 설정할 수 있습니다. 이 속성은 변환된 요소의 위치를 변경하는 데 사용되며 회전의 중심점을 변경할 수 있습니다. "변환 원점: x축 y축 z축;".
이 튜토리얼의 운영 환경: Windows 10 시스템, CSS3&&HTML5 버전, Dell G3 컴퓨터.
css3에서 회전점을 설정하는 방법
2D 회전이란 요소를 2차원 평면에서 시계 방향 또는 시계 반대 방향으로 회전시키는 것을 말합니다. (전환과 함께 사용하면 경험이 더 좋습니다)
문법 형식:
transform:rotate(度数);
참고:
rotate 뒤에는 각도가 오고 단위는 deg입니다. 예를 들어, Transform:rotate(180deg)는 180도 회전을 의미합니다.
변환:회전(180deg) 및 변형:회전(-180deg)과 같이 각도가 양수이면 시계 방향으로 회전하고, 음수이면 시계 반대 방향으로 회전합니다.
기본 회전 중심점은 다음을 기준으로 합니다. Rotate 요소의 중심점입니다.
회전 중심점 변경:
transform-origin
요소가 회전되는 위치를 설정할 수 있습니다.
transform-Origin 속성을 사용하면 변환된 요소의 위치를 변경할 수 있습니다.
2D 변환 요소는 요소의 X축과 Y축을 변경할 수 있습니다. 요소를 3D로 변환하고 요소의 Z축도 변경합니다.
문법 형식:
transform-origin: x-axis y-axis z-axis;
참고:
다음 매개변수 x와 y는 쉼표가 아닌 공백으로 구분됩니다.
xy 변환의 기본 중심점은 요소의 중심점입니다(50%
).또한 xy에 대한 픽셀 또는 방향 명사를 설정할 수 있습니다(예: 상단 하단 왼쪽 오른쪽 중앙).
예제는 다음과 같습니다.
<html>
<head>
<meta charset="utf-8">
<title>123</title>
<style>
#div1
{
position: relative;
height: 200px;
width: 200px;
margin: 100px;
padding:10px;
border: 1px solid black;
}
#div2
{
padding:50px;
position: absolute;
border: 1px solid black;
background-color: red;
transform: rotate(45deg);
transform-origin:20% 40%;
-ms-transform: rotate(45deg); /* IE 9 */
-ms-transform-origin:20% 40%; /* IE 9 */
-webkit-transform: rotate(45deg); /* Safari and Chrome */
-webkit-transform-origin:20% 40%; /* Safari and Chrome */
}
</style>
</head>
<body>
<div id="div1">
<div id="div2">HELLO</div>
</div>
</body>
</html>출력 결과:
(학습 영상 공유: css 영상 튜토리얼)
위 내용은 CSS3에서 회전 회전점을 설정하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!