TIL - transform: translate()

Minsoo·2021년 7월 16일
0

TIL

목록 보기
4/8
post-thumbnail

☄️ 헷갈리는 transform 정리

translate

The translate() CSS function repositions an element in the horizontal and/or vertical directions. Its result is a data type.

syntax

/ Single values /
transform: translate(200px);
transform: translate(50%);

👉 The ordinate (vertical, y-coordinate) of the translating vector will be set to 0. For example, translate(2px) is equivalent to translate(2px, 0)

/ Double values /
transform: translate(100px, 200px);
transform: translate(100px, 50%);
transform: translate(30%, 200px);
transform: translate(30%, 50%);

https://developer.mozilla.org/ko/docs/Web/CSS/transform
https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/translate()

profile
Hello all 👋🏻 📍London

0개의 댓글