CSS transform
속성으로 요소에 회전, 크기 조절, 기울이기, 이동 효과를 부여할 수 있습니다. transform
은 CSS 시각적 서식 모델의 좌표 공간을 변경합니다.
The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
none
이 아닌 값을 지정하면 새로운 쌓임 맥락을 생성합니다. 이 경우, position
이 fixed
거나 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 |
Percentages | refer to the size of bounding box |
Computed value | as specified, but with relative lengths converted into absolute lengths |
Animation type | a transform |
Creates stacking context | yes |
브라우저 호환성
BCD tables only load in the browser
같이 보기
- CSS 변형 사용하기
- 변형 함수의 설명을 담은
<transform-function>
자료형 문서. - CSS 변형 함수의 시각화가 가능한 온라인 도구: CSS Transform Playground