[Css] transform scale

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

Css

목록 보기
1/13

transform

  • 회전 크기 기울이기 이동효과를 부여

scale

  • 크기

scale 문단의 박스 크기는 그대로 가지고 있지만 item의 크기가 바뀐다..
scale 사용 시 가로 세로 사이즈가 0.5로 변경
scale을 1로 사용시에는 원래 크기로 변경
앞쪽의 인자가 x축 뒷쪽의 인자가 y축
x축만 늘릴고 싶을때는 scaleX()를 사용
Y축만 늘릴고 싶을때는 scaleY()를 사용

<!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;
}

#cat{
    width:400px;
    transform: scale(0.5);

}

transfrom 사용시에는 문장의 위치가 바뀌지않고 이미지를 크기를 키울 시 문장을 덮어 버림

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

0개의 댓글