변환(transform)
transform은 요소의 변환 효과를 지정하는 속성입니다.
transform속성에 값을 부여했을 때 변환함수1 변환함수2; 이렇게 할 수 있습니다.
즉, 함수들 사이에 띄어쓰기로 구분할 수 있습니다.
하지만 무작위로 할 수 있는게 아니고 특정한 순서가 있습니다.
transform: 원근법 이동 크기 회전 기울임;
위와 같이 표시됩니다.
2D 변환 함수
| 함수 | 의미 | 단위 |
| translate(x, y) | 이동(x축, y축) | px |
| translateX(x) | 이동(x축) | px |
| translateY(y) | 이동(y축) | px |
| scale(x, y) | 크기(x축, y축) | px |
| scaleX(x) | 크기(x축) | 없음(배수) |
| scaleY(y) | 크기(x축) | 없음(배수) |
| 함수 | 의미 | 단위 |
| rotate(degree) | 회전(각도) | deg |
| skew(x, y) | 기울임(x축, y축) | deg |
| skewX(x) | 기울임(x축축) | deg |
| skewY(y) | 기울임(x축) | deg |
| matrix(n, n, n, n, n, n) | 2차원 변환 효과 |
빈칸
자주 사용된 함수들은 굵게 표시했습니다.
3D 변환 함수
| 함수 | 의미 | 단위 |
| translateZ(z) | 이동(z축) | px |
| translate3d(x, y, z) | 이동(x축, y축, z축) | px |
| scaleZ(z) | 크기(z축) | px |
| scale3d(x, y, z) | 크기(x축, y축, z축) | px |
| 함수 | 의미 | 단위 |
| rotateX(x) | 회전(x축) | deg |
| rotateY(y) | 회전(y축) | deg |
| rotateZ(z) | 회전(z축) | deg |
| rotate3d(x, y, z, a) | 회전(x축, y축, z축, 각도) | deg |
| 함수 | 의미 | 단위 |
| perspective(n) | 원근법(거리) | px |
| matrix3d(n, n, n, n, n, n, n, n, n, n, n, n, n, n, n, n) | 3차원 변환 효과 |
3D 변환 함수 중 자주 사용된 것은 총 3개입니다.
rotateX(x), rotateY(y), perspective(n) 입니다.
transform: translateX(40px) 중 X가 인수(argument)로도 불립니다.
scale은 크기를 표시하는 거라 단위는 없습니다.
rotateX와 rotateY는 3차원 함수입니다.
지금 예시처럼 어떤 변화가 나는지 잘 모르겠는데
이게 바로 원근법을 사용 안했기때문입니다.
원근법함수를 추가하여 3d 효과를 냈습니다.
perspective함수에 500px같은 경우는 나와 물체의 거리를 생각하시면 됩니다.
거리가 짧을수록 물체 왜곡이 더 심합니다(원근법 특성때문입니다).
주의해야할 점은 원근법 함수는 제일 앞에 작성해야 합니다.
skew함수는 기울임을 의미합니다.
perspective 속성
perspective는 하위 요소를 관찰하는 원근 거리를 지정하는 속성입니다.
px등 단위로 지정할 수 있습니다.
perspective 속성과 함수의 차이점
| 속성/함수 | 적용 대상 | 기준점 설정 |
| perspective: 600px; | 관찰 대상의 부모 | perspective-origin |
| transform: perspective(600px) | 관찰 대상 | transform-origin |
backface-visibility속성
backface-visibility는 3D 변환으로 회전된 요소의 뒷면 숨김 여부를 제어하는 속성입니다.
visible란 기본값(뒷면 보임)이 들어 있으며,
hidden(뒷면 숨김) 값도 있습니다.
'프론트엔드 > HTML, CSS, JS기본' 카테고리의 다른 글
| JS 데이터 종류(자료형) (0) | 2023.08.06 |
|---|---|
| JavaScript 개요 (0) | 2023.08.06 |
| CSS 속성(9) - 전환(transition) (0) | 2023.08.03 |
| CSS 속성(8) - 플렉스(정렬) container & items (0) | 2023.08.03 |
| CSS 속성(7) - 배치(position) (0) | 2023.08.03 |
