Style transform 속성

정의와 사용법

transform 이 속성은 2D 또는 3D 변환을 요소에 적용합니다. 이 속성은 요소에 회전, 확대, 이동, 기울기 등을 적용할 수 있습니다.

다른 참조:

CSS 참조 매뉴얼:transform 속성

예제

로터이션 div 요소:

document.getElementById("myDIV").style.transform = "rotate(7deg)";

직접 시험해보세요

문법

transform 속성 반환：

object.style.transform

transform 속성 설정：

object.style.transform = "none|transform-functions|initial|inherit"

속성 값

값 설명
none 변환을 정의하지 않습니다.
matrix(n, n, n, n, n, n) 여섯 값을 가진 행렬을 사용하여 二차 변환을 정의합니다.
matrix3d(n, n, n, n, 등...) 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 변환 요소의 시각적 시각을 정의합니다.
initial 이 속성을 기본 값으로 설정합니다. 참조하십시오 initial。
inherit 부모 요소에서 이 속성을 상속합니다. 참조하십시오 inherit。

기술 세부 사항

기본 값： 없음
반환 값： 문자열로, 요소의 transform 속성。
CSS 버전： CSS3

브라우저 지원

표에서의 숫자는 이 특성을 최초로 완전 지원하는 브라우저 버전을 나타냅니다.

크롬 에지 파이어폭스 사파리 오페라
크롬 에지 파이어폭스 사파리 오페라
36.0 10.0 16.0 9.0 23.0