CSS에서 변환을 사용하는 방법

CSS의 변형 속성은 이동, 크기 조정, 회전 및 기울기를 포함하여 요소에 기하학적 변형을 수행하는 데 사용됩니다. 사용법은 다음과 같습니다: 번역: moveX(x)/translateY(y)/translate(x, y) 크기 조정: scaleX(x)/scaleY(y)/scale(x, y) 회전: 회전(각도)/rotateX(각도 )/rotateY(각도)/rotateZ(각도) 기울이기: 기울이기X(각도)/skewY(각도)

CSS에서 변형 사용

변환 속성은 CSS의 요소에 기하학적 변형을 수행하는 데 사용됩니다. , 번역, 확대/축소, 회전 및 기울기를 포함합니다. 애니메이션, 모핑, 왜곡 등 다양한 시각 효과를 생성할 수 있는 강력한 기능을 제공합니다.

Usage

Transform 속성의 구문은 다음과 같습니다.

<code class="css">transform: <transform-function> [<transform-function>]...;</code>

그 중 <transform-function>은 다음 변환 함수 중 하나일 수 있습니다. <transform-function> 可以是以下任何变换函数：

• translateX(x)：平移元素沿 x 轴
• translateY(y)：平移元素沿 y 轴
• translate(x, y)：平移元素沿 x 和 y 轴
• scaleX(x)：缩放元素沿 x 轴
• scaleY(y)：缩放元素沿 y 轴
• scale(x, y)：缩放元素沿 x 和 y 轴
• rotate(angle)：旋转元素一个角度
• rotateX(angle)：沿 x 轴旋转元素
• rotateY(angle)：沿 y 轴旋转元素
• rotateZ(angle)：沿 z 轴旋转元素
• skewX(angle)：倾斜元素沿 x 轴
• skewY(angle)

translateX(x) code>: x 축을 따라 요소를 이동합니다<p><strong><code>translateY(y): y 축을 따라 요소를 이동합니다

translate(x, y): x 및 y축을 따라 요소 이동 <p></p> <code>scaleX(x): x축을 따라 요소 크기 조정

scaleY(y): 크기 조정 y축을 따라 요소

scale(x, y): x 및 y축을 따라 요소의 크기를 조정합니다.<p></p> <code>rotate(angle): 요소를 다음과 같이 회전합니다. 각도

rotateX(angle): x축을 따라 요소 회전

rotateY(angle): y축을 따라 요소 회전

rotateZ(angle): z축을 따라 요소를 회전합니다

• skewX(angle): x축을 따라 요소를 기울입니다
• skewY(angle) code>: y축을 따라 요소를 기울입니다
• 다중 변환

Transform 속성은 공백으로 구분된 여러 변환 함수를 결합할 수 있습니다.

<code class="css">transform: translate(50px, 100px) rotate(45deg) scale(2);</code>

결합 단위

• Transform 값에는 픽셀(px)이 포함될 수 있습니다. ), 백분율(%) 또는 기타 CSS 단위입니다.

요소에 적용 🎜🎜🎜변환 속성은 모든 HTML 요소에 적용할 수 있지만 다음과 같은 애니메이션 및 시각 효과를 만드는 데 자주 사용됩니다. 🎜🎜🎜메뉴 항목 회전 🎜🎜상호 작용을 나타내는 버튼 크기 조정 🎜🎜이동 사용자 입력에 대한 응답 요소 🎜🎜이미지를 변환하여 고유한 효과 만들기🎜🎜🎜🎜 🎜🎜🎜🎜transform 속성은 콘텐츠 상자가 아닌 요소의 레이아웃 상자에 영향을 미칩니다. 🎜🎜transform 속성은 최신 브라우저에서 널리 지원되지만 이전 브라우저에서는 공급업체 접두사가 필요할 수 있습니다. 🎜🎜

위 내용은 CSS에서 변환을 사용하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!