[Css] transform rotate

rondido·2022년 8월 22일
0

Css

목록 보기
2/13

transform


rotate

  • 회전

  • 단위

  • 45도는 deg == 45deg로 사용

  • turn은 바퀴의 단위 1turn이면 1바퀴를 뜻한다.

  • 양수 일때는 시계방향으로 움직인다. (90deg == 0.25turn)

  • rotate의 인자 값의 타입은 number이기 때문에 양수 음수 소수점등이 올 수 있다.

<!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: rotate(45deg);
}

#cat{
    width:400px;

    transform: rotate(-45deg);
}

양수일때는 시계방향으로 음수일때는 시계반대방향으로 회전

profile
함께 성장하는 것을 좋아하는 프론트엔드 개발자

0개의 댓글