[css] 회전 필터

22 Dec 2023

CSS를 사용하면 요소를 회전시킬 수 있는 여러 가지 방법이 있습니다. 여기서는 CSS 필터를 사용하여 요소를 회전하는 방법에 대해 알아보겠습니다.

1. 회전 필터 속성

CSS 필터를 사용하여 요소를 회전시키기 위해서는 transform 속성을 사용해야 합니다.

.rotate {
  transform: rotate(45deg);
}

위 예제에서는 rotate 함수를 사용하여 요소를 45도만큼 회전시킵니다.

2. 회전 중심점 지정하기

기본적으로 CSS의 transform 속성은 요소의 중심을 기준으로 회전됩니다. 만약 다른 지점을 중심으로 회전시키고 싶다면 transform-origin 속성을 사용하여 중심점을 지정할 수 있습니다.

.rotate {
  transform-origin: top left;
}

위 예제에서는 top left를 중심점으로 지정하여 요소를 회전시킵니다.

3. 브라우저 호환성

CSS 회전 필터를 사용할 때 브라우저 호환성에 유의해야 합니다. 2D 회전 필터는 대부분의 최신 브라우저에서 지원되지만, 사용하는 기존 브라우저를 고려하여 벤더 접두사(-webkit-, -moz-, -ms-, -o-)를 함께 사용하는 것이 좋습니다.

4. 예시

아래 예시는 HTML과 CSS를 사용하여 요소를 회전하는 방법을 보여줍니다.

<!DOCTYPE html>
<html>
<head>
  <style>
    .rotate {
      width: 100px;
      height: 100px;
      background-color: red;
      transform: rotate(45deg);
    }
  </style>
</head>
<body>

<div class="rotate"></div>

</body>
</html>

5. 결론

CSS를 이용하여 요소를 회전시키는 방법에 대해 알아보았습니다. transform 및 transform-origin 속성을 사용하여 회전 중심점을 지정하고 원하는 각도만큼 요소를 회전시킬 수 있습니다. 다양한 화면을 디자인하는 데 유용한 CSS 회전 필터를 활용하여 창의적이고 독특한 디자인을 만들어보세요.

참고 자료

MDN Web Docs