요소의 변환 효과(변형)를 지정
transform: 변환함수1 변환함수2 변환함수3... ;
transform: 원근법 이동 크기 회전 기울임;
(괄호가 들어가면 함수!)
transform 2D 변환 함수
| 값(변환함수) | 의미 | 단위 |
| translate(x, y) | 이동(X축, Y축) | 단위 |
| translateX(x) | 이동(X축) | 단위 |
| translateY(y) | 이동(Y축) | 단위 |
| scale(x, y) | 크기(X축, Y축) | 없음(배수) |
| scaleX(x) | 크기(X축) | 없음(배수) |
| scaleY(y) | 크기(Y축) | 없음(배수) |
| rotate(degree) | 회전(각도) | deg |
| skew(x-deg, y-deg) | 기울임(X축, Y축) | deg |
| skewX(x-deg) | 기울임(X축) | deg |
| skewY(y-deg) | 기울임(Y축) | deg |
| matrix(n, n, n, n, n, n) | 2차원 변환 효과 | 없음 |
transform 3D 변환 함수
| 값(변환함수) | 의미 | 단위 |
| translate3d(x, y, z) | 이동(X축, Y축, Z축) | 단위 |
| translateZ(z) | 이동(Z축) | 단위 |
| scale3d(x, y, z) | 크기(X축, Y축, Z축) | 없음(배수) |
| scaleZ(z) | 크기(Z축) | 없음(배수) |
| rotate3d(x, y, z, a) | 회전(X벡터, Y벡터, Z벡터, 각도) | 없음, deg |
| rotateZ(z) | 회전(Z축) | deg |
| perspective(n) - 사용시 transform 내에서 가장 앞에 선언해야 함. | 원근법(거리) | 단위 |
| matrix3d(n, n, n, n, n, n, n, n, n, n, n, n, n, n, n, n) | 3차원 변환 효과 | 없음 |
'CSS' 카테고리의 다른 글
| CSS (0) | 2022.11.21 |
|---|---|
| 18 - animation (0) | 2020.06.24 |
| 17 - transform (변환 속성) (0) | 2020.06.23 |
| 16 - transition (0) | 2020.06.22 |