지토의 개발일기/html + CSS
[HTML+CSS] 2차원 변환
지아토
2021. 10. 5. 10:15
▶ 보통은 컴퓨터 프로그램 화면 좌표를 가로는 x축 세로는 y축이며 왼쪽 위에 위치하는 점이 영점으로 볼 수 있다.
여기에 z축을 추가 하면 3차원 화면 좌표로 확장이 되는 것 입니다.
간단한 예시를 보겠습니다.
See the Pen by yeojinho (@yeojinho) on CodePen.
▶ 2차원 변환 함수
| 변환 함수 | 설명 |
| translate(translateX, translateY) | 특정 크기 만큼 이동함 |
| translateX(transrateX) | X축으로 특정 크기 만큼 이동 |
| translateY(transrateY) | Y축으로 특정 크기 만큼 이동 |
| scale(scaleX,scaleY) | 특정 크기만큼 확대 및 축소 |
| scaleX(scaleX) | X축으로 특정 크기 만큼 확대 및 축소 |
| scaleY(scaleY) | Y축으로 특정 크기 만큼 확대 및 축소 |
| skew(angleX,angleY) | 특정 각도만큼 기울임 |
| skewX(angleX) | X축으로 특정 각도만큼 기울임 |
| skewY(angleY) | Y축으로 특정 각도만큼 기울임 |
| rotate(angleZ) | 특정 각도 만큼 회전 |
예시 )
See the Pen by yeojinho (@yeojinho) on CodePen.
▶transform - origin 속성
transform-origin 속성은 변환 중심을 설정하는 스타일 속성임
예시)
입력한 코드를 보면 transform-origin에 100% 100% 입력은 객체의 오른쪽 아래가 변환의 중심이 됨.