beepbeep

2차원 변형하기 본문

HTML, CSS

2차원 변형하기

삑삑도요 2022. 10. 18. 17:40

1) 좌우 이동
- transform: translateX(x축 방향 이동거리);

2) 상하이동
- transform: translateY(y축 방향 이동거리);

3) 대각선 이동
- transform: translate(X축 방향, Y축 방향);

4) scale(확대/축소)
- transform: scaleX(비율) 2=2배
- transform: scaleY(비율)
- transform: scale(X축 비율, Y축 비율)

5) rotate(회전)
- transform: rotate(n deg);
* 시계방향으로 회전

'HTML, CSS' 카테고리의 다른 글

배치 관련 스타일 - position  (0) 2022.10.18
글자 및 글꼴 관련 스타일  (0) 2022.10.18
3차원 변형하기  (0) 2022.10.18
transition  (0) 2022.10.18
flex-item 전용 속성  (0) 2022.10.18