CSS에서 점을 고정점으로 사용하여 회전을 구현하는 방법-프런트엔드 Q&A-php.cn

CSS에서 점을 고정점으로 사용하여 회전을 구현하는 방법

藏色散人

풀어 주다： 2023-01-31 11:12:16

원래의

2933명이 탐색했습니다.

점을 고정점으로 사용하여 CSS를 회전하는 방법: 1. 새 HTML 파일을 만듭니다. 2. img를 통해 이미지를 가져옵니다. 3. img 태그에 "@keyframesrotate{0%{transform:"으로 CSS 속성을 추가합니다. rotate(0deg); }100%{transform:rotate(360deg);}}"는 한 점을 고정점으로 하여 회전을 구현할 수 있습니다.

CSS에서 점을 고정점으로 사용하여 회전을 구현하는 방법

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

CSS로 고정 소수점 회전을 달성하는 방법은 무엇입니까?

css를 사용하여 이미지 회전을 구현하고 회전 지점을 설정합니다

먼저 몇 가지 기술적 지식 대중화를 수행합니다.

예

회전 div 요소:

div
{
transform:rotate(7deg);
-ms-transform:rotate(7deg); 	/* IE 9 */
-moz-transform:rotate(7deg); 	/* Firefox */
-webkit-transform:rotate(7deg); /* Safari 和 Chrome */
-o-transform:rotate(7deg); 	/* Opera */
}

로그인 후 복사

정의 및 사용법

Transform 속성은 2D 또는 3D 변환을 적용합니다. . 이 속성을 사용하면 요소를 회전, 크기 조정, 이동 또는 기울일 수 있습니다.

Syntax

transform: none|transform-functions;

로그인 후 복사

Value	Description
none	Definition 변환이 수행되지 않습니다.
matrix(n,n,n,n,n,n)	은 6개 값의 행렬을 사용하여 2D 변환을 정의합니다.
matrix3d(n,n,n,n,n,n,n,n,n,n, n, n,n,n,n,n)	16개 값의 4x4 행렬을 사용하여 3D 변환을 정의합니다.
translate(x,y)	은 2D 변환을 정의합니다.
translate3d(x,y,z)	3D 변환을 정의합니다.
translateX(x)	은 X축 값만 사용하여 변환을 정의합니다.
translateY(y)	은 Y축 값만 사용하여 변환을 정의합니다.
translateZ(z)	은 Z축 값만 사용하여 3D 변환을 정의합니다.
scale(x,y)	은 2D 스케일링 변환을 정의합니다.
scale3d(x,y,z)	3D 스케일링 변환을 정의합니다.
scaleX(x)	X축 값을 설정하여 크기 조정 변환을 정의합니다.
scaleY(y)	Y축 값을 설정하여 크기 조정 변환을 정의합니다.
scaleZ(z)	Z축 값을 설정하여 3D 크기 조정 변환을 정의합니다.
rotate(angle)	은 매개변수에 각도를 지정하여 2D 회전을 정의합니다.
rotate3d(x,y,z,angle)	3D 회전을 정의합니다.
rotateX(angle)	은 X축을 따라 3D 회전을 정의합니다.
rotateY(angle)	은 Y축을 따라 3D 회전을 정의합니다.
rotateZ(angle)	은 Z축을 따라 3D 회전을 정의합니다.
skew(x-angle,y-angle)	은 X축과 Y축을 따라 2D 기울이기 변환을 정의합니다.
skewX(angle)	은 X축을 따라 2D 기울이기 변환을 정의합니다.
skewY(angle)	은 Y축을 따라 2D 기울이기 변환을 정의합니다.
perspective(n)	3D 변환 요소에 대한 투시도를 정의합니다.

그러면 다들 가장 많이 부딪히는 문제가 바로 출발점, 즉 회전점의 문제입니다. 이렇게 돌아서길 바라는데 왜 순종하지 않는 걸까요?

이것은 변환 원점

예

회전된 요소의 기준점 위치 설정:

div
{
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 和 Chrome */
-webkit-transform-origin:20% 40%;	/* Safari 和 Chrome */

-moz-transform: rotate(45deg);		/* Firefox */
-moz-transform-origin:20% 40%;		/* Firefox */

-o-transform: rotate(45deg);		/* Opera */
-o-transform-origin:20% 40%;		/* Opera */
}

로그인 후 복사

정의 및 사용법

transform-origin 속성을 사용하면 변환된 요소의 위치를 변경할 수 있습니다.

2D 변환 요소는 요소의 x축과 y축을 변경할 수 있습니다. 3D 변환 요소는 Z축을 변경할 수도 있습니다.

Transform-Origin 속성을 더 잘 이해하기 위해.

Safari/Chrome 사용자: 3D 변환을 위한 변환 원본 속성의 사용을 더 잘 이해합니다.

참고: 이 속성은 변환 속성과 함께 사용해야 합니다.

Syntax

transform-origin: x-axis y-axis z-axis;

로그인 후 복사

value	Description
x-axis	뷰가 X축에서 배치되는 위치를 정의합니다. 가능한 값: left center right length %
y-axis	은 뷰가 Y축에 배치되는 위치를 정의합니다. 가능한 값: top center bottom length %
z-axis	은 뷰가 Z축에 배치되는 위치를 정의합니다. 가능한 값: length

value

Description

x-axis

뷰가 X축에서 배치되는 위치를 정의합니다. 가능한 값:

left
center
right
length
%

y-axis

은 뷰가 Y축에 배치되는 위치를 정의합니다. 가능한 값:

top
center
bottom
length
%

z-axis

은 뷰가 Z축에 배치되는 위치를 정의합니다. 가능한 값:

length

最后，给大家呢演示一个实例demo：

原始图片为一个黑色正方形，我们希望它根据左上角的顶点进行旋转：

图片：

CSS에서 점을 고정점으로 사용하여 회전을 구현하는 방법

源码：

nbsp;html>

	
		<meta>
		<title></title>
		<style>
			img{
				margin-top: 200px;
				margin-left: 500px;
				width: 100px;
				height: 100px;
				display: block;
   				 animation: rotate 6s linear infinite;
   				 transform-origin:0 0;
			}
			@keyframes rotate{
				0%{
					transform: rotate(0deg);
					
				}
				100%{
					transform: rotate(360deg);
				}
			}
		</style>
	
	
		
		<img  alt="CSS에서 점을 고정점으로 사용하여 회전을 구현하는 방법" >

로그인 후 복사

效果展示：

CSS에서 점을 고정점으로 사용하여 회전을 구현하는 방법