transform
translate
-
이동
-
0,0기준으로 이동
-
첫번째 인자 x축, 두번째 인자 y축
-
한개의 인자 값만 입력 시에는 x축으로만 이동
-
사용 가능한 단위는 length(px, rm) or percentage
-
음수 사용시에는 0,0을 기준으로 x축은 왼쪽으로 y축은 위쪽 이동
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="styles/main.css">
<title>CSS</title>
</head>
<body>
<img id="cat" src="cat.jpg">
<div>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Similique nulla deleniti, tempora reprehenderit nobis fugit! Sint architecto praesentium cumque repellat porro, corporis harum, omnis laboriosam fuga, qui dolor id aliquid?</div>
</body>
</html> #cat{
width:400px;
transform: translate(100px,150px);
}
translateX 프로퍼티 사용시에는 x축으로만 translateY 프로퍼티 사용시에는 y 축으로만 이동
함께 성장하는 것을 좋아하는 프론트엔드 개발자