CSS 트랜스폼 속성

정의와 사용법

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

transform 속성을 더 잘 이해하기 위해 다음을 확인하세요.보여주기.

다른 것을 참조하세요:

CSS3 강의:CSS3 2D 변환

CSS3 강의:CSS3 3D 변환

HTML DOM 참조 설명서:transform 속성

예제

div 요소를 회전시킵니다:

div
{
transform:rotate(7deg);
}

직접 시도해 보세요

페이지 하단에 더 많은 예제가 있습니다.

CSS 문법

transform: none|transform-functions;

속성 값

값 설명 테스트
none 변환을 수행하지 않습니다. 테스트
matrix(n,n,n,n,n,n) 2D 변환을 정의합니다. 6개의 값을 사용하는 행렬을 사용합니다. 테스트
matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n) 3D 변환을 정의합니다. 4x4 행렬을 사용하여 16개의 값을 사용합니다.
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 변환 요소에 시각적 시점을 정의합니다. 테스트

기술 세부 사항

기본 값: none
thừa kế: no
버전: CSS3
JavaScript 문법: object.style.transform="rotate(7deg)"

더 많은 예제

탁자 위에 던진 이미지
이 예제에서 '폴리오' 이미지를 생성하고 이미지를 회전하는 방법을 보여줍니다.

브라우저 지원

표에 나타난 숫자는 이 속성을 완전히 지원하는 최초 브라우저 버전을 나타냅니다.

-webkit-、-moz- 또는 -ms- 프리퍼스의 숫자는 사용되는 프리퍼스의 최초 버전을 나타냅니다.

속성 크롬 IE / 엣지 파이어폭스 사파리 오페라
transform (2D) 36.0
4.0 -webkit-		 10.0
9.0 -ms-		 16.0
3.5 -moz-		 9.0
3.2 -webkit-		 23.0
15.0 -webkit-
10.5 -o-
transform (3D) 36.0
12.0 -webkit-		 12.0 10.0 9.0
4.0 -webkit-		 23.0
15.0 -webkit-