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