[CSS] transform tanslate

개발 옆차기·2022년 8월 22일
0

Css

목록 보기
3/13

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 축으로만 이동

profile
개발의 색이 짙어지기를!

0개의 댓글