[CSS] transform skew

rondido·2022년 8월 22일
0

Css

목록 보기
4/13

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값만 기울기

profile
개발 옆차기

0개의 댓글