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 사용시에는 문장의 위치가 바뀌지않고 이미지를 크기를 키울 시 문장을 덮어 버림