transform

CSS transform 속성으로 요소에 회전, 크기 조절, 기울이기, 이동 효과를 부여할 수 있습니다. transform은 CSS 시각적 서식 모델의 좌표 공간을 변경합니다.

none이 아닌 값을 지정하면 새로운 쌓임 맥락을 생성합니다. 이 경우, positionfixed거나 absolute인 요소의 컨테이닝 블록으로서 작용합니다.

변형 가능한 요소만 transform할 수 있습니다. 즉, CSS 박스 모델이 레이아웃을 결정하는 모든 요소 중 비대체 인라인 박스, 표 열 박스, 표 열 그룹 박스를 제외한 요소에만 적용할 수 있습니다.

구문

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

/* 함수 값 */
transform: matrix(1.0, 2.0, 3.0, 4.0, 5.0, 6.0);
transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
transform: perspective(17px);
transform: rotate(0.5turn);
transform: rotate3d(1, 2.0, 3.0, 10deg);
transform: rotateX(10deg);
transform: rotateY(10deg);
transform: rotateZ(10deg);
transform: translate(12px, 50%);
transform: translate3d(12px, 50%, 3em);
transform: translateX(2em);
transform: translateY(3in);
transform: translateZ(2px);
transform: scale(2, 0.5);
transform: scale3d(2.5, 1.2, 0.3);
transform: scaleX(2);
transform: scaleY(0.5);
transform: scaleZ(0.3);
transform: skew(30deg, 20deg);
transform: skewX(30deg);
transform: skewY(1.07rad);

/* 다중 함수 값 */
transform: translateX(10px) rotate(10deg) translateY(5px);
transform: perspective(500px) translate(10px, 0, 20px) rotateY(3deg);

/* 전역 값 */
transform: inherit;
transform: initial;
transform: unset;

transform 속성은 키워드 none 또는 하나 이상의 <transform-function> 값을 사용해 지정할 수 있습니다.

<transform-function>
요소에 적용할 하나 이상의 CSS 변형 함수. 변형 함수는 왼쪽에서 오른쪽으로 곱해집니다. 즉, 요소에 변형을 오른쪽부터 왼쪽으로 하나씩 순서대로 적용하는 것과 같습니다.
none
아무런 변형도 적용하지 않음.

형식 구문

none | <transform-list>

where
<transform-list> = <transform-function>+

where
<transform-function> = <matrix()> | <translate()> | <translateX()> | <translateY()> | <scale()> | <scaleX()> | <scaleY()> | <rotate()> | <skew()> | <skewX()> | <skewY()> | <matrix3d()> | <translate3d()> | <translateZ()> | <scale3d()> | <scaleZ()> | <rotate3d()> | <rotateX()> | <rotateY()> | <rotateZ()> | <perspective()>

where
<matrix()> = matrix( <number>#{6} )
<translate()> = translate( <length-percentage> , <length-percentage>? )
<translateX()> = translateX( <length-percentage> )
<translateY()> = translateY( <length-percentage> )
<scale()> = scale( <number> , <number>? )
<scaleX()> = scaleX( <number> )
<scaleY()> = scaleY( <number> )
<rotate()> = rotate( [ <angle> | <zero> ] )
<skew()> = skew( [ <angle> | <zero> ] , [ <angle> | <zero> ]? )
<skewX()> = skewX( [ <angle> | <zero> ] )
<skewY()> = skewY( [ <angle> | <zero> ] )
<matrix3d()> = matrix3d( <number>#{16} )
<translate3d()> = translate3d( <length-percentage> , <length-percentage> , <length> )
<translateZ()> = translateZ( <length> )
<scale3d()> = scale3d( <number> , <number> , <number> )
<scaleZ()> = scaleZ( <number> )
<rotate3d()> = rotate3d( <number> , <number> , <number> , [ <angle> | <zero> ] )
<rotateX()> = rotateX( [ <angle> | <zero> ] )
<rotateY()> = rotateY( [ <angle> | <zero> ] )
<rotateZ()> = rotateZ( [ <angle> | <zero> ] )
<perspective()> = perspective( <length> )

where
<length-percentage> = <length> | <percentage>

perspective()가 변형 함수의 일부라면 항상 제일 앞에 위치해야 합니다.

예제

HTML

<div>Transformed element</div>

CSS

div {
  border: solid red;
  transform: translate(30px, 20px) rotate(20deg);
  width: 140px;
  height: 60px;
}

결과

CSS 변형 사용하기<transform-function> 문서를 방문해 더 많은 예제를 찾아보세요.

접근성 고려사항

크기 변경/확대/축소 애니메이션은 흔한 편두통 유발 요인이므로 접근성에 좋지 않습니다. 그러나 꼭 넣어야 한다면 되도록 사이트 전체의 애니메이션을 켜거나 끌 수 있는 방법을 제공하는걸 고려해주세요.

prefers-reduced-motion 미디어 기능을 사용할 수도 있습니다. 미디어 쿼리와 함께 사용하면, 사용자가 시스템 설정에서 애니메이션을 줄였는지 알아내고, 애니메이션을 비활성화할 수 있습니다.

자세한 내용은 다음 링크에서 확인할 수 있습니다.

명세

Specification Status Comment
CSS Transforms Level 2
The definition of 'transform' in that specification.
Editor's Draft Adds 3D transform functions.
CSS Transforms Level 1
The definition of 'transform' in that specification.
Working Draft Initial definition.
초기값none
적용대상transformable elements
상속no
Percentagesrefer to the size of bounding box
Mediavisual
Computed valueas specified, but with relative lengths converted into absolute lengths
Animation typea transform
Canonical orderthe unique non-ambiguous order defined by the formal grammar
Creates stacking contextyes

브라우저 호환성

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
transformChrome Full support 36
Full support 36
Full support 1
Prefixed
Prefixed Implemented with the vendor prefix: -webkit-
Edge Full support 12
Full support 12
Full support 12
Prefixed
Prefixed Implemented with the vendor prefix: -webkit-
Firefox Full support 16
Full support 16
Full support 49
Prefixed
Prefixed Implemented with the vendor prefix: -webkit-
Full support 44
Prefixed Disabled
Prefixed Implemented with the vendor prefix: -webkit-
Disabled From version 44: this feature is behind the layout.css.prefixes.webkit preference (needs to be set to true). To change preferences in Firefox, visit about:config.
IE Full support 10
Notes
Full support 10
Notes
Notes Internet Explorer does not support the global values initial and unset.
Full support 11
Prefixed
Prefixed Implemented with the vendor prefix: -webkit-
Full support 9
Prefixed Notes
Prefixed Implemented with the vendor prefix: -ms-
Notes Internet Explorer 5.5 or later supports a proprietary Matrix Filter which can be used to achieve a similar effect.
Opera Full support 23
Full support 23
Full support 15
Prefixed
Prefixed Implemented with the vendor prefix: -webkit-
No support 12.1 — 15
No support 10.5 — 15
Prefixed
Prefixed Implemented with the vendor prefix: -o-
Safari Full support 9
Full support 9
Full support 3.1
Prefixed
Prefixed Implemented with the vendor prefix: -webkit-
WebView Android Full support 37
Full support 37
Full support 2
Prefixed Notes
Prefixed Implemented with the vendor prefix: -webkit-
Notes Android 2.3 has a bug where input forms will "jump" when typing, if any container element has a -webkit-transform.
Chrome Android Full support 36
Full support 36
Full support 18
Prefixed
Prefixed Implemented with the vendor prefix: -webkit-
Firefox Android Full support 16
Full support 16
Full support 49
Prefixed
Prefixed Implemented with the vendor prefix: -webkit-
Full support 44
Prefixed Disabled
Prefixed Implemented with the vendor prefix: -webkit-
Disabled From version 44: this feature is behind the layout.css.prefixes.webkit preference (needs to be set to true). To change preferences in Firefox, visit about:config.
Opera Android Full support 24
Full support 24
Full support 14
Prefixed
Prefixed Implemented with the vendor prefix: -webkit-
No support 12.1 — 14
No support 11 — 14
Prefixed
Prefixed Implemented with the vendor prefix: -o-
Safari iOS Full support 9
Full support 9
Full support 3.2
Prefixed
Prefixed Implemented with the vendor prefix: -webkit-
Samsung Internet Android Full support 3.0
Full support 3.0
Full support 1.0
Prefixed
Prefixed Implemented with the vendor prefix: -webkit-
3D supportChrome Full support 12Edge Full support 12Firefox Full support 16IE Full support 10
Notes
Full support 10
Notes
Notes Internet Explorer 9.0 or earlier has no support for 3D transforms. Mixing 3D and 2D transform functions, such as -ms-transform:rotate(10deg) translateZ(0);, will prevent the entire property from being applied.
Opera Full support 15Safari Full support 4WebView Android Full support 3
Prefixed
Full support 3
Prefixed
Prefixed Implemented with the vendor prefix: -webkit-
Chrome Android Full support 18Firefox Android Full support 16Opera Android Full support 14Safari iOS Full support 3.2Samsung Internet Android Full support 1.0

Legend

Full support  
Full support
See implementation notes.
See implementation notes.
User must explicitly enable this feature.
User must explicitly enable this feature.
Requires a vendor prefix or different name for use.
Requires a vendor prefix or different name for use.

같이 보기