transform
transform 속성은 컨텐츠 요소를 이동(translate), 회전(rotate), 확대(scale), 기울기(skew) 등의 효과를 줄 수 있습니다. 애니메이션 작업시 가장 많이 쓰는 요소입니다. 요소를 이동시키거나 회전 시킬 수 있으며, 원근점(perspective)를 사용하여 3D까지 구현 할 수 있습니다.
transform
transform 속성은 요소의 움직임을 표현합니다.
| 특징 | 설명 |
|---|---|
| 기본 값 | transform : none |
| 버전 | CSS3 |
정의(Definition)
- transform 속성은 요소의 움직임을 표현합니다.
문법(Syntax)
transform : none | matrix() | translate() | translateX() | translateY() | scale() | scaleX() | scaleY() | rotate() | skew() | skewX() | skewY() | matrix3d() | translate3d() | translateZ() | scale3d() | scaleZ() | rotate3d() | rotateX() | rotateY() | rotateZ() | perspective()
이동(translate)
| 속성값 | 예시 | 설명 |
|---|---|---|
| translate(x,y) | transform: translate(10px, 20px); | X좌표, Y좌표 이동을 나태냅니다. |
| translate3d(x,y,z) | transform: translate3d(10px, 20px, 30px); | X좌표, Y좌표, Z좌표 이동을 나태냅니다. |
| translateX(x) | transform: translateX(10px); | X좌표 이동을 나태냅니다. |
| translateY(y) | transform: translateY(10px); | Y좌표 이동을 나태냅니다. |
| translateZ(z) | transform: translateZ(10px); | Z좌표 이동을 나태냅니다. |
호환성(Compatibility)
 |
 |
 |
 |
 |
 6 |
 7 |
8 |
 9 |
 10 |
 11 |
 |
 |
 |
|
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| transform(2D) | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용안됨 | 사용안됨 | 사용안됨 | 사용안됨 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 |
| transform(3D) | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용안됨 | 사용안됨 | 사용안됨 | 사용안됨 | 사용안됨 | 사용안됨 | 사용가능 | 사용가능 | 사용가능 |
