CSS transform 속성 – 올바른 이해와 사용 방법

정의 및 사용 방법

transform 속성은
요소가 렌더링되는 평면(2D)이나 공간(3D) 위치에 대한 '회전', '크기 조절(확대/축소 배율)', '기울이기', '이동하기'와 같은 시각적 변형을 적용시킵니다.

알아두세요!
이 속성은 요소의 영역 공간에 영향을 미치는 변형을 적용합니다.
즉, 요소의 영역인 너비나 높이를 지정할 수 없는 요소에는 아무런 효과가 없습니다.

기본 예제

transform 속성으로 변형을 적용시키려면 CSS에서 제공하는 변형 함수(transform function) 값으로 지정해야 합니다.
제공하는 변형 함수는 다양하지만 이해를 돕기 위해 가장 대표적인 변형 함수를 사용하여 각각의 라이브 데모 예제('회전', '크기 조절', '기울이기', '이동하기', '여러 개의 값 적용하기')로 살펴보겠습니다.

CSS 라이브 데모 예제에 사용하는 공통 CSS

.ele {
    width: 200px;
    height: 150px;
    background-color: rgba(255, 0, 200, .15);
    border: 3px dashed #663399;
    transform: /* 변형 함수(transform function) 값 */
}

회전

transform 속성으로 요소가 회전하는 라이브 데모 예제입니다.
이 예제에는 요소가 Z 축을 기준으로 평면(2D) 회전하는 rotate() 함수 값을 사용했습니다.

크기 조절

transform 속성으로 요소가 크기(scale, 확대/축소 배율)를 조절하는 라이브 데모 예제입니다.
이 예제에는 요소가 가로와 세로 크기 비율을 변경하는 scale() 함수 값을 사용했습니다.

기울이기

transform 속성으로 요소가 기울이는 라이브 데모 예제입니다.
이 예제에는 요소가 X 축과 Y 축을 기준으로 기울이는 skew() 함수 값을 사용했습니다.

이동하기

transform 속성으로 요소가 이동하는 라이브 데모 예제입니다.
이 예제에는 요소가 X 축과 Y 축을 기준으로 이동시키는 translate() 함수 값을 사용했습니다.

여러 개의 값 적용하기

transform 속성은 띄어 쓰기를 구분으로 변형 함수(transform function) 값을 다중으로 지정할 수 있습니다. 이렇게 하면 여러 개의 변형을 조합할 수 있습니다.

형식 구문

구문

CSS

/* 키워드 값 */
transform: none;

/* 단일한 변형 함수(<transform-list>) 값 */
transform: rotate(45deg);
transform: rotateX(45deg);
transform: rotateY(45deg);
transform: rotateZ(45deg);
transform: rotate3d(45deg);
transform: translate(20px, -25px);
transform: translateX(20px);
transform: translateY(-25px);
transform: translateZ(0);
transform: translate3d(20px, -25px, 0);
transform: scale(0.7);
transform: scale(0.7, 1.1);
transform: scaleX(0.7);
transform: scaleY(1.1);
transform: scaleZ(1);
transform: scale3d(0.7, 1.1, 1);
transform: skew(30deg);
transform: skew(30deg, -20deg);
transform: skewX(30deg);
transform: skewY(-20deg);
transform: matrix(1, 2, 3, 4, 5, 6);
transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
transform: perspective(200px);

/* 여러 개의 변형 함수(<transform-list>) 값 */
transform: rotate(45deg) translate(20px, -25px);
transform: rotate(45deg) translate(20px, -25px) skewY(-20deg);
transform: rotate(45deg) scale(0.7);
transform: perspective(200px) rotateX(-15deg) rotateY(30deg);

/* 글로벌 값 */
transform: inherit;
transform: initial;
transform: revert;
transform: revert-layer;
transform: unset;

값

`transform` 속성의 값
`none`	초깃값임. 어떤 변형도 적용하지 않습니다.
`<transform-list>`	변형 함수입니다. 변형 함수를 지정하려면 하나 이상의 변형 함수를 공백으로 나열합니다. 아래의 'CSS 변형 함수 목록'을 참조하세요. 여러 개의 변형 함수를 지정하면 함수의 적용 순서는 오른쪽에서 왼쪽으로입니다. 브라우저는 오른쪽에 있는 함수부터 먼저 계산합니다.

참고하세요!
transform 속성의 값이 none이 아닐 경우, 해당 요소는 새로운 쌓임 맥락(Stacking context)을 생성합니다. 이로 인해 z-index를 사용한 요소의 겹침 순서가 달라질 수 있습니다. 자세한 설명은 CSS z-index 속성 – 요소들이 겹칠 때 쌓임 순서 제어하기를 참고하세요!

CSS 변형 함수 목록

`transform` 속성에서 사용 가능한 CSS 필터 함수의 목록입니다.
함수	변형	매개변수	매개변수 유형
`rotate()`	2D 평면에서 Z 축을 기준으로 회전	하나의 값을 지정 예: `rotate(45deg)`	각도 단위(deg, rad, turn 등) 예: `rotate(45deg)`
`rotateX()`	X 축을 기준으로 회전 (3D 전용)	하나의 값을 지정 예: `rotateX(45deg)`	각도 단위(deg, rad, turn 등) 예: `rotateX(45deg)`
`rotateY()`	Y 축을 기준으로 회전 (3D 전용)	하나의 값을 지정 예: `rotateY(45deg)`	각도 단위(deg, rad, turn 등) 예: `rotateY(45deg)`
`rotateZ()`	Z 축을 기준으로 회전 (`rotate()`와 동일)	하나의 값을 지정 예: `rotateZ(45deg)`	각도 단위(deg, rad, turn 등) 예: `rotateZ(45deg)`
`rotate3d()`	임의의 축을 기준으로 회전	네 개의 값을 지정 예: `rotate3d(x, y, z, angle)` 형식 x, y, z는 회전축 벡터의 방향 angle은 회전 각도 예: `rotate3d(1, 1, 0, 45deg)`	숫자 3 개 + 각도 단위(deg, rad, turn 등) 1개 `rotate3d(1, 1, 0, 45deg)`
`translate()`	X 축과 Y 축 방향으로 이동	하나 또는 두 개의 값을 지정 하나의 값을 지정: X 축 방향만 이동 예: `translate(50px)` → X 축 50px 이동 두 개의 값을 지정: X 축, Y 축 이동 예: `translate(50px, 100px)` → X 축 50px, Y 축 100px 이동	길이 단위(px, em 등) 또는 백분율(%) 예: `translate(20px, -25px)`
`translateX()`	X 축으로 이동	하나의 값을 지정 예: `translateX(20px)`	길이 단위(px, em 등) 또는 백분율(%) 예: `translateX(20px)`
`translateY()`	Y 축으로 이동	하나의 값을 지정 예: `translateY(20px)`	길이 단위(px, em 등) 또는 백분율(%) 예: `translateY(20px)`
`translateZ()`	Z 축으로 이동 (3D 전용)	하나의 값을 지정 예: `translateZ(20px)`	길이 단위(px, em 등) 예: `translateZ(20px)`
`translate3d()`	X, Y, Z 축으로 동시에 이동	세 개의 값을 지정 `translate3d(x, y, z)` 형식 예: `translate3d(20px, -25px, 0)`	X 축: 길이 단위(px, em 등) 또는 백분율(%) Y 축: 길이 단위(px, em 등) 또는 백분율(%) Z 축: 길이 단위(px, em 등) 예: `translate3d(20px, 20px, 30px)`
`scale()`	X 축과 Y 축 방향으로 비율만큼 확대 또는 축소	하나 또는 두 개의 값을 지정 하나의 값을 지정: X, Y 축 동일 비율 예: `scale(1.2)` → 전체 1.2배 두 개의 값을 지정: X, Y 축 각각 비율 지정 예: `scale(0.7, 1.1)` → X 축 0.7배, Y 축 1.1배	숫자(배율) 예: `scale(0.7, 1.1)`
`scaleX()`	X 축방향으로 비율만큼 확대 또는 축소	하나의 값을 지정 예: `scaleX(0.7)`	숫자(배율) 예: `scaleX(0.7)`
`scaleY()`	Y 축방향으로 비율만큼 확대 또는 축소	하나의 값을 지정 예: `scaleY(1.1)`	숫자(배율) 예: `scaleY(1.1)`
`scaleZ()`	Z 축방향으로 비율만큼 확대 또는 축소 (3D 전용)	하나의 값을 지정 예: `scaleY(1.1)`	숫자(배율) 예: `scaleZ(1.1)`
`scale3d()`	X, Y, Z 축 방향으로 각각 비율만큼 확대 또는 축소	세 개의 값을 지정 `scale3d(x, y, z)` 형식 예: `scale3d(0.7, 1.1, 1)`	숫자(배율) 예: `scale3d(0.7, 1.1, 1)`
`skew()`	X 축과 Y 축 방향으로 비스듬히 기울임	하나 또는 두 개의 값을 지정 하나의 값을 지정: X 축 방향만 기울임 예: `translate(50px)` → X 축 50px 이동 두 개의 값을 지정: X 축, Y 축 각각 기울임 예: `skew(30deg, -20deg)` → X 축 30deg, Y 축 -20deg 기울임	각도 단위(deg, rad, turn 등) 예: `skew(30deg, -20deg)`
`skewX()`	X 축방향으로 비스듬히 기울임	하나의 값을 지정 예: `skewX(30deg)`	각도 단위(deg, rad, turn 등) 예: `skewX(30deg)`
`skewY()`	Y 축방향으로 비스듬히 기울임	하나의 값을 지정 예: `skewY(30deg)`	각도 단위(deg, rad, turn 등) 예: `skewY(30deg)`
`matrix()`	2D 변형(이동, 회전, 크기 조절, 기울이기)을 하나의 행렬로 정의	6개의 숫자 값 지정 `matrix(a, b, c, d, e, f)` 형식 고급 제어에 사용	숫자 6개 `matrix(1, 2, 3, 4, 5, 6)`
`matrix3d()`	3D 변형을 위한 4×4 행렬을 정의	16개의 숫자 값 지정 `matrix3d(n1, n2, ..., n16)` 형식 모든 3D 변형을 조합 가능	숫자 16개 `matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)`
`perspective()`	3D일 때 사용자가 바라보는 시점으로 사용자와 z=0 평면 사이의 거리를 정의	하나의 값을 지정 예: `perspective(200px)`	길이 단위(px, em 등) 예: `perspective(200px)`

알아두세요!
perspective()가 여러 개의 변형 함수 값으로 사용될 경우 반드시 맨 앞에 위치해야 합니다.

형식 정의

transform 속성의 형식 정의
초깃값	`none`
적용 요소	변형 가능한 요소 즉, 요소의 영역인 너비나 높이를 지정할 수 있는 요소
상속	아니오
백분율	요소 자신의 실제 크기(bounding box)를 기준으로 계산
애니메이션	예

활용 예제

이 예제는 버튼 안의 화살표를 사용하여 transform 속성을 실습하는 데모입니다. 화살표 모양을 만들기 위해서 요소에 rotate()와 translateY()를 적용하여 방향과 위치를 조절(변형)였습니다. 화살표가 시각적 장식으로만 사용되므로 aria-hidden="true"를 통해 접근성에 영향을 주지 않도록 했습니다.

HTML

<button type="button" id="toggle-button">
    <span class="toggle-button-text">클릭하기</span>
    <span aria-hidden="true" class="toggle-button-arrow"></span>  
</button>

aria-hidden="true"는 스크린 리더 및 보조 기술을 사용하는 것으로, aria-hidden 속성의 값이 true로 설정되면 해당 요소와 그 안에 포함된 콘텐츠는 접근성 기술을 통해 감지되지 않습니다. 위 예제에서는 <span> 태그가 오직 시각적 장식으로만 활용되었기 때문에 웹접근성 향상을 위해 사용되었습니다.

CSS

#toggle-button {
    padding: 0.5em 1em;
    background: none;
    border: 1px solid #777;
    border-radius: 0.5em;
    display: flex;
    align-items: center;
    cursor: pointer;
}
.toggle-button-text {
    margin-right: 1em;
}
.toggle-button-arrow { /* 화살표를 표시 */
    display: inline-flex;
    width: 0.7em;
    height: 0.7em;
    border-left: 1px solid black;
    border-bottom: 1px solid black;
    transform: rotate(-45deg) translateY(-0.3em);
}

브라우저 호환성

transform 속성의 브라우저 호환성
속성	데스크탑 Chrome	데스크탑데스크탑 Edge	데스크탑 Firefox	Safari
`transform`	36	12	16	9

명세서

transform 속성의 명세서 사양
명세서 사양
`transform`	CSS Transforms Module Level 1 #transform-property
변형 함수	CSS Transforms Module Level 2 #transform-functions