정의 및 사용

transform 은 요소를 2D 나 3D 변형을 할 수 있게 하는 속성이다. rotate, scale, translate, skew 등과 같은 변형이 가능하다.

정의 및 사용

기본값	none
상속	no
버전	CSS3
자바스크립트 구문	object.style.transform=”rotate(7deg)”

브라우저 지원

각 브라우저 마다 접두사를 사용하면 2D transform 이 사용가능하며, 3D 는 Safari 와 Chrome 에서만 지원한다. (IE는 9부터 지원)

구문

{ transform: none | transform-functions; }

2D 속성

속성 값 설명

값	설명
none	변형 속성을 적용하지 않음
matrix(n,n,n,n,n,n)	translate, scale, rotate, skew 각 속성을 한꺼번에 적용할 수 있는 매트릭스 함수
translate(x,y)	요소의 위치를 옮기는 속성
scale(x,y)	요소의 크기를 비율에 맞춰 확대/축소하는 속성
rotate(angle)	요소를 지정된 각도 만큼 회전시키는 속성
skew (x-angle, y-angle)	요소를 지정된 각도만큼 모양을 비스듬히 변형시키는 속성

3D 속성

속성 값 설명

값	설명
none	변형 속성을 적용하지 않음
matrix3d (n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n)	translate, scale, rotate, skew 각 속성을 한꺼번에 적용할 수 있는 매트릭스 함수
translate3d(x,y,z)	요소의 위치를 옮기는 속성
translateX(x)	요소의 x 좌표 위치를 옮기는 속성
translateY(y)	요소의 y 좌표 위치를 옮기는 속성
translateZ(z)	요소의 z 좌표 위치를 옮기는 속성
scale3d(x,y,z)	요소의 크기를 비율에 맞춰 확대/축소하는 속성
scaleX(x)	요소의 x축 크기를 비율에 맞춰 확대/축소하는 속성
scaleY(y)	요소의 y축 크기를 비율에 맞춰 확대/축소하는 속성
scaleZ(z)	요소의 z축 크기를 비율에 맞춰 확대/축소하는 속성
rotate3d(x,y,z,angle)	요소를 지정된 각도 만큼 회전시키는 속성
rotateX(angle)	요소를 지정된 각도 만큼 x축을 회전시키는 속성
rotateY(angle)	요소를 지정된 각도 만큼 y축을 회전시키는 속성
rotateZ(angle)	요소를 지정된 각도 만큼 z축을 회전시키는 속성
skewX(angle)	요소를 지정된 각도만큼 x축 모양을 비스듬히 변형시키는 속성
skewY(angle)	요소를 지정된 각도만큼 y축 모양을 비스듬히 변형시키는 속성
skewZ(angle)	요소를 지정된 각도만큼 z축 모양을 비스듬히 변형시키는 속성
perspective(n)	..

예제

div {
transform: rotate(15deg);
}

div {
transform: translateX(230px);
}

div {
transform: sacle(1.5, 2.6);
}

div {
transform: skew(220deg, -150deg;
}

• 각 속성마다 -ms-, -moz-, -webkit-, -o- 를 모두 적어줘야 하지만 여기서는 편의상 생락했음을 참고
• 위 예제의 4개 속성을 하나로 합쳐서 아래 두가지 방법으로도 나타낼 수 있다

div {
transform: rotate(15deg) translateX(230px) scale(1.5, 2.6) skew(220deg, -150deg);
}

div {
transform: matrix(1.06, 1.84, 0.54, 2.8, 466px, 482px);
}

• 위 예제처럼 각각을 나타내는 것보다 matrix 함수로 한번에 나타내는 것이 효율적이지만 matrix 함수로 변환하기 위해서는 삼각함수와 매트릭스 함수 이론을 알아야 한다.

버그 및 이슈

소제목

code

목록 으로