[css] 회전 필터
CSS3를 사용하면 요소를 회전시킬 수 있는 많은 방법이 있습니다. 여기에서는 transform 속성 중 하나인 rotate 함수를 사용하여 요소를 회전하는 방법에 대해 살펴보겠습니다.
rotate 함수란?
rotate 함수는 요소를 지정한 각도만큼 회전시키는 CSS transform 함수입니다. 이 기능을 사용하면 텍스트, 이미지 또는 다른 요소를 회전시킬 수 있습니다.
기본 구문
.rotate {
transform: rotate(45deg);
}
위의 코드는 클래스명이 rotate인 요소를 45도 각도로 회전시키는 예제입니다. deg 단위는 각도를 나타내며, 양수 또는 음수 값으로 지정할 수 있습니다.
브라우저 호환성
rotate 함수는 CSS3에서 도입되었으며, 대부분의 모던 브라우저에서 지원됩니다. 하지만 모든 브라우저에서 완벽히 호환되지는 않을 수 있으므로, 기능을 사용할 때에는 브라우저 호환성을 고려해야 합니다.
예제
다음은 HTML과 CSS를 사용하여 rotate 함수를 적용한 예제입니다.
HTML
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>회전 필터 예제</title>
</head>
<body>
<div class="rotate-container">
<div class="rotate">회전된 텍스트</div>
</div>
</body>
</html>
CSS
.rotate-container {
width: 200px;
height: 200px;
background-color: #EEEEEE;
display: flex;
justify-content: center;
align-items: center;
}
.rotate {
transform: rotate(45deg);
font-size: 24px;
}
위 예제에서는 rotate 함수를 사용하여 텍스트를 45도로 회전시킨 후, 중앙에 위치하도록 스타일을 적용했습니다.
CSS를 사용하여 요소를 회전시키는 다양한 방법이 있지만, rotate 함수는 간편하고 유용한 방법 중 하나입니다.