실행 가능한 CSS 문서: CSS 회전

Q: CSS로 요소를 회전하려면 어떻게 하나요?

transform: rotate(45deg);나 별도 속성 rotate: 45deg;를 쓰세요. 양수 각도는 시계 방향, 음수 각도는 반시계 방향으로 돌고, transform-origin을 바꾸지 않으면 요소의 가운데를 중심으로 돌아요.

Q: transform: rotate()와 rotate 속성은 무엇이 다른가요?

그려지는 결과는 같아요. rotate 속성은 transform과 독립적이라서, hover 규칙이 회전을 없애지 않고 scale이나 translate를 바꿀 수 있고, 각각 자기 트랜지션을 가질 수 있어요. 함께 쓰면 선언 순서와 상관없이 transform: translate() rotate() scale()처럼 동작해요.

Q: CSS로 이미지를 90도 회전하려면 어떻게 하나요?

img에 transform: rotate(90deg);(또는 rotate: 90deg;)를 추가하세요. 이미지는 레이아웃에서 원래 공간을 유지해서, 세로로 긴 이미지를 가로로 돌리면 이웃과 겹칠 수 있어요. 컨테이너에 회전한 크기만큼 공간을 주세요.

Q: CSS로 요소를 계속 회전시키려면 어떻게 하나요?

@keyframes spin { to { rotate: 360deg; } }를 정의하고 animation: spin 1s linear infinite;를 적용하세요. 속도가 일정하도록 linear를 쓰고, prefers-reduced-motion: reduce에서는 느리게 하거나 멈추세요.

Q: CSS로 텍스트를 세로로 회전하려면 어떻게 하나요?

세로 레이블에는 보통 rotate(90deg)보다 writing-mode: vertical-rl이 더 좋아요. 레이아웃도 바꿔서 요소가 겹치는 대신 세로 공간을 차지해요. rotate는 작은 장식용 기울임에 쓰세요.

요소 회전하기

방법은 두 가지이고 결과는 같아요. transform 안의 rotate() 함수, 또는 단독 rotate 속성이에요. 양수 각도는 시계 방향으로 돌아요.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Rotate</title>
  <style>
    body { font-family: system-ui, sans-serif; font-size: 13px; }
    .row { display: flex; gap: 50px; padding: 30px; }
    .box { width: 90px; height: 60px; display: grid; place-items: center; color: white; }
    .a { transform: rotate(45deg); background: #2563eb; }
    .b { rotate: 45deg; background: #16a34a; }
    .c { rotate: -15deg; background: #f59e0b; color: #111827; }
  </style>
</head>
<body>
  <div class="row">
    <div class="box a">transform</div>
    <div class="box b">rotate: 45deg</div>
    <div class="box c">-15deg</div>
  </div>
</body>
</html>

파란 상자와 초록 상자는 정확히 같게, 가운데를 중심으로 시계 방향 45도 돌았어요. 주황 상자는 음수 각도라서 반시계 방향으로 기울어요. 회전은 레이아웃을 절대 움직이지 않아요. 각 상자는 여전히 원래의 90 x 60 자리를 차지하고, 그래서 회전한 요소가 이웃과 겹칠 수 있어요.

각도 단위

단위	한 바퀴	90도
`deg`	`360deg`	`90deg`
`turn`	`1turn`	`0.25turn`
`rad`	`6.2832rad`	`1.5708rad`
`grad`	`400grad`	`100grad`

보통은 deg를 골라요. turn은 회전(rotate: 1turn)에 읽기 좋아요. 360을 넘는 각도도 쓸 수 있고 애니메이션에서 의미가 있어요. 키프레임에서 rotate(720deg)는 두 바퀴 돌아요. 단위는 항상 쓰세요. rotate(45)는 잘못된 값이라 무시돼요.

슬라이더를 끌어서 각 단위의 각도를 보세요.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Angle slider</title>
  <style>
    body { font-family: system-ui, sans-serif; font-size: 14px; }
    .stage { display: grid; place-items: center; height: 160px; background: #f3f4f6; margin: 10px 0; }
    #arrow { width: 110px; height: 14px; background: #2563eb; border-radius: 7px; position: relative; }
    #arrow::after { content: ""; position: absolute; inset-inline-end: -10px; top: -8px; border: 15px solid transparent; border-inline-start: 18px solid #2563eb; border-inline-end: 0; }
  </style>
</head>
<body>
  <label>angle <input id="a" type="range" min="-360" max="360" value="30"></label>
  <div class="stage"><div id="arrow"></div></div>
  <p id="out"></p>
  <script>
    const input = document.getElementById('a');
    const update = () => {
      const deg = Number(input.value);
      document.getElementById('arrow').style.rotate = deg + 'deg';
      document.getElementById('out').textContent =
        deg + 'deg = ' + (deg / 360).toFixed(3) + 'turn = ' + (deg * Math.PI / 180).toFixed(4) + 'rad';
    };
    input.addEventListener('input', update);
    update();
  </script>
</body>
</html>

모서리를 중심으로 회전하기: transform-origin

요소는 기본적으로 가운데를 중심으로 돌아요. transform-origin은 회전축을 옮겨요. 시계 바늘은 가운데가 아니라 끝을 축으로 돌아요.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>transform-origin</title>
  <style>
    .face { position: relative; width: 160px; height: 160px; border-radius: 50%; background: #e5e7eb; }
    .hand {
      position: absolute;
      left: 76px;              /* 80px center minus half the 8px width */
      top: 20px;
      width: 8px;
      height: 60px;
      border-radius: 4px;
      background: #111827;
      transform-origin: bottom center; /* pivot at the center of the face */
      rotate: 120deg;
    }
    .pin { position: absolute; left: 74px; top: 74px; width: 12px; height: 12px; border-radius: 50%; background: #f59e0b; }
  </style>
</head>
<body>
  <div class="face"><div class="hand" id="hand"></div><div class="pin"></div></div>
</body>
</html>

바늘의 아래쪽 끝이 시계 판 가운데의 주황색 핀에 놓이고, rotate: 120deg가 바늘을 4시 방향으로 돌려요. transform-origin 줄을 지우면 바늘이 핀을 벗어나 자기 가운데를 중심으로 돌아요.

텍스트 회전과 세로 레이블

배지나 스티커에는 rotate로 살짝 기울이는 게 괜찮아요. 진짜 세로 레이블에는 writing-mode가 더 좋아요. 레이아웃을 바꿔서 요소가 옆의 것과 겹치는 대신 높고 좁아지기 때문이에요.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Vertical text</title>
  <style>
    body { font-family: system-ui, sans-serif; padding-top: 24px; }
    .row { display: flex; gap: 12px; align-items: flex-start; }
    .label { background: #2563eb; color: white; padding: 6px 10px; }
    .rotated { rotate: -90deg; }
    .vertical { writing-mode: vertical-rl; rotate: 180deg; }
    .content { background: #e5e7eb; padding: 10px; }
    .badge { display: inline-block; rotate: -6deg; background: #f59e0b; padding: 4px 10px; margin: 16px 0 0 8px; }
  </style>
</head>
<body>
  <div class="row"><div class="label rotated" id="r">Section</div><div class="content">rotate: -90deg overlaps</div></div>
  <div class="row" style="margin-top: 20px;"><div class="label vertical" id="v">Section</div><div class="content">writing-mode takes vertical space</div></div>
  <span class="badge">New</span>
  <p id="out"></p>
  <script>
    const size = (id) => { const el = document.getElementById(id); return el.offsetWidth + ' x ' + el.offsetHeight; };
    document.getElementById('out').textContent = 'layout box: rotated ' + size('r') + ', writing-mode ' + size('v');
  </script>
</body>
</html>

표시 창은 각 레이블의 레이아웃 크기를 보여 줘요. 회전한 레이블은 여전히 원래의 넓고 낮은 상자를 차지해서, 옆에 빈틈을 남기고 행의 위아래로 삐져나와 거기 있는 것과 겹쳐요. writing-mode 레이블은 높고 좁은 상자를 차지해요. rotate: 180deg를 더하면 아래에서 위로 읽히고, 세로 레이블의 보통 방향이에요.

클릭이나 hover로 아이콘 회전하기

화살표를 180도 돌리는 게 섹션이 열렸다는 걸 보여 주는 표준 방법이에요. rotate와 트랜지션을 함께 쓰세요.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Rotating arrow</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    .toggle { display: inline-flex; align-items: center; gap: 8px; padding: 8px 12px; font: inherit; border: 1px solid #111827; background: white; border-radius: 6px; }
    .chevron { width: 10px; height: 10px; border-inline-end: 2px solid #111827; border-bottom: 2px solid #111827; rotate: 45deg; transition: rotate 0.25s ease-out; }
    .toggle[aria-expanded="true"] .chevron { rotate: 225deg; }
  </style>
</head>
<body>
  <button class="toggle" aria-expanded="false">Details <span class="chevron" aria-hidden="true"></span></button>
  <script>
    const btn = document.querySelector('.toggle');
    btn.addEventListener('click', () => btn.setAttribute('aria-expanded', btn.getAttribute('aria-expanded') !== 'true'));
  </script>
</body>
</html>

꺾쇠는 테두리 두 개가 있는 정사각형을 45도 돌려서 아래를 가리키게 만든 거예요. 버튼이 펼쳐지면 225도가 되어 위를 가리키고, 트랜지션이 반 바퀴를 애니메이션해요. aria-expanded 속성이 스타일을 결정해서, 보이는 상태와 스크린 리더가 알리는 상태가 절대 어긋나지 않아요.

회전하는 로더

회전은 0에서 360도까지의 회전을 linear 타이밍으로 반복해서 속도가 절대 바뀌지 않게 한 거예요.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Spinner</title>
  <style>
    @keyframes spin {
      to { rotate: 360deg; }
    }
    .spinner {
      width: 36px;
      height: 36px;
      border: 4px solid #e5e7eb;
      border-top-color: #2563eb;
      border-radius: 50%;
      animation: spin 1s linear infinite;
    }
    @media (prefers-reduced-motion: reduce) {
      .spinner { animation-duration: 3s; } /* slower, still shows activity */
    }
  </style>
</head>
<body>
  <div class="spinner" role="status" aria-label="Loading"></div>
</body>
</html>

to 키프레임만 있으면 애니메이션은 요소 자신의 회전(없음)에서 시작해 360deg에서 끝나고, 360deg는 0과 똑같아 보여서 infinite가 튀지 않고 반복해요. 시스템에 움직임을 줄여 달라고 요청한 사람에게는 스피너가 세 배 느리게 돌아요. 키프레임은 애니메이션 페이지에서 더 다뤄요.

3D 회전: rotateX, rotateY

rotateX()는 가로축을 중심으로 요소를 뒤로 젖히고, rotateY()는 문처럼 세로축을 중심으로 돌려요. 원근이 없으면 그냥 찌그러져 보여요. 부모에 perspective를 주면 깊이가 생겨요.

.scene { perspective: 600px; }
.card  { transform: rotateY(35deg); }
.flip  { transform: rotateY(180deg); backface-visibility: hidden; } /* card flip */

요소를 돌리는 대신 거울처럼 뒤집으려면 scale: -1 1(가로 뒤집기)을 쓰세요. 180도 회전은 위아래를 뒤집는 거라서 같지 않아요.

자주 하는 실수

그대로 있는 <span>이나 <a> 회전하기. 그냥 인라인 요소는 transform을 무시해요. display: inline-block을 추가하세요.
hover하면 사라지는 회전. transform: scale(1.1)인 hover 규칙이 transform: rotate(...)를 대체해요. 별도의 rotate와 scale 속성을 쓰거나 두 함수를 모두 나열하세요.
레이아웃이 공간을 만들어 줄 거라고 기대하기. 회전한 이미지는 회전하지 않은 상자를 유지하고 이웃과 겹쳐요. 컨테이너에 회전한 크기를 주거나, 텍스트라면 writing-mode를 쓰세요.
ease를 쓴 스피너. 기본 타이밍은 바퀴마다 빨라졌다 느려져요. linear를 쓰세요.
엉뚱한 점을 중심으로 회전하기. 각도를 조정하기 전에 transform-origin을 정하세요.

자주 묻는 질문

CSS로 요소를 회전하려면 어떻게 하나요?

transform: rotate(45deg);나 별도 속성 rotate: 45deg;를 쓰세요. 양수 각도는 시계 방향, 음수 각도는 반시계 방향으로 돌고, transform-origin을 바꾸지 않으면 요소의 가운데를 중심으로 돌아요.

transform: rotate()와 rotate 속성은 무엇이 다른가요?

그려지는 결과는 같아요. rotate 속성은 transform과 독립적이라서, hover 규칙이 회전을 없애지 않고 scale이나 translate를 바꿀 수 있고, 각각 자기 트랜지션을 가질 수 있어요. 함께 쓰면 선언 순서와 상관없이 transform: translate() rotate() scale()처럼 동작해요.

CSS로 이미지를 90도 회전하려면 어떻게 하나요?

img에 transform: rotate(90deg);(또는 rotate: 90deg;)를 추가하세요. 이미지는 레이아웃에서 원래 공간을 유지해서, 세로로 긴 이미지를 가로로 돌리면 이웃과 겹칠 수 있어요. 컨테이너에 회전한 크기만큼 공간을 주세요.

CSS로 요소를 계속 회전시키려면 어떻게 하나요?

@keyframes spin { to { rotate: 360deg; } }를 정의하고 animation: spin 1s linear infinite;를 적용하세요. 속도가 일정하도록 linear를 쓰고, prefers-reduced-motion: reduce에서는 느리게 하거나 멈추세요.

CSS로 텍스트를 세로로 회전하려면 어떻게 하나요?

세로 레이블에는 보통 rotate(90deg)보다 writing-mode: vertical-rl이 더 좋아요. 레이아웃도 바꿔서 요소가 겹치는 대신 세로 공간을 차지해요. rotate는 작은 장식용 기울임에 쓰세요.