CSS에서 회전된 요소의 기본 위치를 설정하는 방법은 무엇입니까?

CSS(Cascading Style Sheets)는 아름답고 역동적인 웹 페이지를 만드는 데 다양한 효과를 제공하는 강력한 도구입니다. CSS에서 가장 중요한 도구 중 하나는 요소를 회전하는 기능입니다. 요소를 회전시켜 사용자의 관심을 끌고 메시지를 전달하는 데 도움이 되는 독특한 디자인과 애니메이션을 만듭니다. 여기에서는 CSS에서 회전된 요소의 기본 배치를 설정하는 방법을 살펴보겠습니다.

CSS중형변환성

변형 속성을 사용하면 회전, 크기 조절, 기울이기 등 요소에 다양한 변형을 적용할 수 있습니다. 요소에 변환이 적용되면 요소의 기본 위치가 변경되어 요소를 올바르게 배치하기가 어렵습니다.

회전, 크기 조정, 기울이기 및 변환은 변환 속성의 하위 속성입니다. 여기서는 회전된 하위 속성에 중점을 두겠습니다. 회전 속성을 사용하면 페이지의 고정 지점을 중심으로 요소를 회전할 수 있습니다.

재 CSS中의 元素旋转

CSS에서 요소를 회전하려면 회전() 함수와 함께 변환 속성을 사용합니다.

구문

으아악

여기서 "각도"는 是以島为单位指定要应用于元素的旋转weight。

예를 들어 다음 코드는 요소를 30도 회전합니다.

으아악

회전된 요소의 위치는 회전 각도에 따라 조정됩니다. 이로 인해 요소가 원래 위치에서 이동할 수 있으며, 이는 올바르게 유지하는 데 문제가 될 수 있습니다.

CSS中可사용 가능한 旋转变换类型

현재 CSS에는 많은 종류의 응용 프로그램이 있습니다.围绕元素的수평과垂直轴旋转。rotateZ()函数围绕元素的z轴旋转，该轴垂直于屏幕。

设置旋转元素的基础位置的要性

• 회전된 요소의 기본 위치는 컨테이너와 관련하여 고정되는 위치를 결정합니다. 기본적으로 기본 배치는 요소의 중심으로 설정됩니다. 그러나 기본 배치는 변환 원본 속성을 사용하여 조정할 수 있습니다. 이는 요소가 페이지에 배치되는 방식에 영향을 미칠 수 있기 때문에 중요합니다.

• 使사용 변환 원본 属性来调整旋转元素的基本位置

• transform-origin 속성은 회전된 요소의 기본 위치를 조정하는 데 사용할 수 있습니다. 이 속성은 요소가 회전되는 지점을 지정합니다. 기본적으로 기본 배치는 요소의 중심입니다. 즉, 요소가 중심점을 중심으로 회전합니다.

• 기본 배치를 조정하려면 변환 원본 속성을 다른 값으로 설정할 수 있습니다.

다음 코드는 기본 배치를 요소의 왼쪽 상단으로 설정합니다 −

으아악

CSS에서 회전된 요소의 기본 배치를 설정하는 몇 가지 예를 살펴보겠습니다.

示例1：围绕其中心旋转一个정방형

재 这个例子中，我们使用transform属性将佬30degree，基准位置默认设置为中心。

으아악

예 2: 오른쪽 하단 모서리를 중심으로 요소 회전

이 예에서는 변환 속성을 사용하여 사각형을 30도 회전한 다음 변환 원본 속성을 오른쪽 하단으로 설정합니다.

으아악

예 3: 요소의 기본 배치를 변경하는 회전 애니메이션

이 예에서는 컨테이너에 빨간색 배경색의 사각형을 만들고 위치: 절대값, 위쪽 및 왼쪽 값을 사용하여 초기 위치를 설정합니다. 또한 너비와 높이를 100px로 설정한 다음 애니메이션 속성을 사용하여 회전이라는 키프레임 애니메이션을 적용합니다. 이 애니메이션은 2초 동안 실행되고 무한 반복됩니다.

ㅋㅋㅋ到中心。

으아악

결론

여기서 우리는 CSS旋转元素를 사용하고 있습니다.致。

위 내용은 CSS에서 회전된 요소의 기본 위치를 설정하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!