CSS 참조 매뉴얼

CSS @규칙(RULES)

CSS 속성 전체 목록

CSS3 transform 속성 사용 방법 및 예제

transform CSS 속성은 원소의2D 또는3D 변환. 이 속성은 원소를 회전, 확대, 이동, 기울임, 변환, 회전, 확대 등을 두차원이나 삼차원 공간에서 등으로 처리할 수 있도록 합니다.

아래 표는 이 속성의 사용 설명과 버전 기록, 그리고 JavaScript 스크립트에서 이 속성의 사용 문법을 설명합니다.

Default value:	none
Applicable to:	Transformable elements
Inherit:	No
Animatable:	Yes.참조 애니메이션 속성。
버전：	CSS3의 새 기능
JavaScript 문법：	object.style.transform="rotate(7deg)

transform 사용 문법

이 속성의 문법은 다음과 같습니다:

transform:　[　transform-function　]　1　or more values | none | initial | inherit

아래 예제는 transform 속성을 사용하는 방법을 설명합니다.

예제

img　{
　　　　-webkit-transform:　translate(200px,　50px);　　/*　Chrome,　Safari,　Opera　*/
　　　　　　　-moz-transform:　translate(200px,　50px);　　/*　Firefox　*/
　　　　　　　　-ms-transform:　translate(200px,　50px);　　/*　IE　9　*/
　　　　　　　　　　　　transform:　translate(200px,　50px);　　　　　　
}

테스트를 보고 보세요‹/›

속성 값

아래 표는 이 속성의 값을 설명합니다.

값	설명
translate(tx,ty)	X, Y축을 기준으로 원소를 지정된 수량으로 이동시킵니다.
translate3d(tx,ty,tz)	X, Y, Z축을 기준으로 원소를 지정된 수량으로 이동시킵니다.
translateX(tx)	X축을 기준으로 원소를 지정된 수량으로 이동시킵니다.
translateY(ty)	Y축을 기준으로 원소를 지정된 수량으로 이동시킵니다.
translateZ(tz)	Z축을 기준으로 원소를 지정된 수량으로 이동시킵니다.
rotate(a)	transform에 따라-origin 속성 정의, 원소의 원점을 기준으로 지정된 각도로 원소를 회전시킵니다.
회전3d(x,y,z, a)	[x, y, z] 방향 벡터를 중심으로, 마지막 매개변수에서 지정된 각도로 회전3D 공간의 요소
rotateX(a)	X축을 중심으로 요소를 주어진 각도로 회전합니다.
rotateY(a)	Y축을 중심으로 요소를 주어진 각도로 회전합니다.
rotateZ(a)	Z축을 중심으로 요소를 주어진 각도로 회전합니다.
scale(sx,sy)	요소의 너비와 높이를 주어진 수치로 상승 또는 하락시킵니다. 이 기능은 scale(1,1)는 무효입니다。
scale3d(sx,sy,sz)	X, Y, Z축을 따라 주어진 수치로 요소를 축소합니다. 이 기능은 scale3d(1,1,1)는 무효입니다。
scaleX(sx)	X축을 따라 요소를 축소합니다.
scaleY(sy)	Y축을 따라 요소를 축소합니다.
scaleZ(sz)	Z축을 따라 요소를 축소합니다.
skew(ax,ay)	X축과 Y축을 따라 주어진 각도로 요소를 기울입니다.
skewX(ax)	요소가 X축을 따라 주어진 각도로 기울입니다.
skewY(ay)	요소가 Y축을 따라 주어진 각도로 기울입니다.
matrix(n,n,n,n,n,n)	로 변환 행렬의 형태로 지정2D 변환
matrix(n,n,n,n,n,n, n,n,n,n,n,n,n,n,n,n)	로16의 값을4×4변환 행렬의 형태로 지정3D 변환
perspective(length)	정의3transform 요소의 시각적 거리를 정의합니다. 일반적으로 이 함수 값이 증가함에 따라 요소가 관찰자로부터 더 멀리 나타납니다。
none	아무 변환도 적용하지 않도록 지정합니다。
initial	이 속성을 기본 값으로 설정합니다。
inherit	지정된 경우, 관련 요소는 부모 요소의 transform 속성 값을 사용합니다。

브라우저 호환성

transform 속성의 브라우저 호환성, 아래 표의 숫자는 이 속성을 지원하는 브라우저의 최소 버전 번호를 나타냅니다; 모든 주요 브라우저는 이 속성을 지원합니다。

	Firefox （2D）3.5 +，（3D）10+ ^-moz-，16 + Chrome （2D）4 +，（3D）12+ ^-webkit-，36 + Internet Explorer （2D）9 ^-ms-，10+ Apple Safari （2D）3.2 +，（3D）4+ ^-webkit- Opera （2D）10.5+ -o 　 ^-，（2D）（3D）15+ 　 ^-webkit-，23+

추가로 읽기

다음 튜토리얼을 참조하십시오:CSS3 2D 변환，CSS3 3D 변환

CSS3 transform-origin 속성 CSS top 속성