transform
skew
-
기울기
-
첫번째 인자가 x각, 두번째 인자가 y각
-
한개에 인자만 쓰면 x각만 이동
<!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;
margin: 100px;
transform: skew(20deg,10deg);
}
skewX 프로퍼티 사용 시 x값으로 기울이고 skewY 프로퍼티는 Y값만 기울기
함께 성장하는 것을 좋아하는 프론트엔드 개발자