translate - 이동 효과
- transform 속성에 사용할 수 있는 변형 함수 중 하나로 이동 효과를 담당
- 엘리먼트를 현재 위치에서 지정된 값만큼 이동시키는 역할을 수행
- 요소의 위치를 수평 또는 수직 방향으로 변경하거나, 수평 및 수직 방향으로 변경
- 2차원 벡터의 특징
- 벡터의 좌표들은 요소가 각 방향으로 얼마나 이동하는지를 정의
/* 단일 <length-percentage> 값 */
transform: translate(200px);
transform: translate(50%);
/* 이중 <length-percentage> 값 */
transform: translate(100px, 200px);
transform: translate(100px, 50%);
transform: translate(30%, 200px);
transform: translate(30%, 50%);
transform: translate
transform: translateX
transform: translateY
https://developer.mozilla.org/ko/docs/Web/CSS/transform-function/translate
translate() - CSS: Cascading Style Sheets | MDN
translate() CSS 함수 (en-US) 는 요소의 위치를 수평 또는 수직 방향으로 변경하거나, 수평 및 수직 방향으로 변경합니다. 실행 결과로 <transform-function> 데이터 유형을 반환합니다.
developer.mozilla.org
'기술 > CSS' 카테고리의 다른 글
| [CSS] Flex - Margin Auto (0) | 2023.10.24 |
|---|---|
| [CSS] transform- transition🥇 vs margin (0) | 2023.10.16 |
| [CSS] Transform (변형) (1) | 2023.10.16 |
| [CSS] transition - 스타일 전환 효과 (0) | 2023.10.16 |
| [CSS] position 제대로 이해하기 💡 (0) | 2023.10.12 |