>  기사  >  웹 프론트엔드  >  CSS에서 변환을 사용하는 방법

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

下次还敢
下次还敢원래의
2024-04-28 15:21:181049검색

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

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

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 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.