translateY 함수
translateY 함수는 요소를 Y축을 따라
이동시킵니다. transform 속성과
함께 사용됩니다.
속성 값으로는 크기 단위를 사용할 수 있습니다.
양수 값은 아래로, 음수 값은 위로 이동시킵니다.
문법
선택자 {
transform: translateY(이동량);
}
예시
블록에 마우스를 올리면 블록이
아래로 30px 이동합니다:
<div id="elem"></div>
#elem {
border: 1px solid black;
width: 100px;
height: 50px;
}
#elem:hover {
transform: translateY(30px);
}
:
예시
블록에 마우스를 올리면 블록이
위로 30px 이동합니다:
<div id="elem"></div>
#elem {
border: 1px solid black;
width: 100px;
height: 50px;
}
#elem:hover {
transform: translateY(-30px);
}
:
같이 보기
-
X축과 Y축을 따라 이동시키는
translate함수 -
X축을 따라 이동시키는
translateX함수
