Dokumentacja CSS z przykładami: Rotate

Q: Jak obrócić element w CSS?

Użyj transform: rotate(45deg); albo osobnej właściwości rotate: 45deg;. Dodatnie kąty obracają zgodnie z ruchem wskazówek zegara, a ujemne przeciwnie, wokół środka elementu, chyba że zmienisz transform-origin.

Q: Czym różni się transform: rotate() od właściwości rotate?

Dają ten sam wynik. Właściwość rotate jest niezależna od transform, więc reguła hover może zmienić scale albo translate bez usuwania obrotu, a każda może mieć własne przejście. Razem działają jak transform: translate() rotate() scale(), bez względu na kolejność, w jakiej je zadeklarujesz.

Q: Jak obrócić obrazek o 90 stopni w CSS?

Dodaj transform: rotate(90deg); (albo rotate: 90deg;) do img. Obrazek zachowuje w układzie swoje pierwotne miejsce, więc wysoki obrazek obrócony do poziomu może zachodzić na sąsiadów; daj jego kontenerowi miejsce na obrócony rozmiar.

Q: Jak sprawić, żeby element kręcił się w CSS?

Zdefiniuj @keyframes spin { to { rotate: 360deg; } } i zastosuj animation: spin 1s linear infinite;. Użyj linear, żeby prędkość była stała, i spowolnij albo zatrzymaj animację przy prefers-reduced-motion: reduce.

Q: Jak obrócić tekst pionowo w CSS?

Dla pionowej etykiety writing-mode: vertical-rl jest zwykle lepsze niż rotate(90deg), bo zmienia też układ: element zajmuje miejsce w pionie zamiast zachodzić na inne. Używaj rotate do drobnych, dekoracyjnych przechyleń.

Obróć element

Dwa sposoby, ten sam wynik: funkcja rotate() wewnątrz transform albo samodzielna właściwość rotate. Dodatnie kąty obracają zgodnie z ruchem wskazówek zegara:

<!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>

Niebieskie i zielone pudełko są obrócone dokładnie tak samo, o 45 stopni zgodnie z ruchem wskazówek zegara wokół swoich środków. Bursztynowe pudełko ma ujemny kąt, więc przechyla się w przeciwną stronę. Obrót nigdy nie przesuwa układu: każde pudełko nadal zajmuje swoje pierwotne miejsce 90 na 60, dlatego obrócone elementy mogą zachodzić na sąsiadów.

Jednostki kąta

Jednostka	Pełny obrót	90 stopni
`deg`	`360deg`	`90deg`
`turn`	`1turn`	`0.25turn`
`rad`	`6.2832rad`	`1.5708rad`
`grad`	`400grad`	`100grad`

deg to zwykły wybór; turn dobrze się czyta przy obracaniu (rotate: 1turn). Kąty ponad 360 są dozwolone i mają znaczenie w animacjach: rotate(720deg) w klatce kluczowej obraca dwa razy. Zawsze pisz jednostkę: rotate(45) jest nieprawidłowe i zostaje zignorowane.

Przesuń suwak, żeby zobaczyć kąt w każdej jednostce:

<!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>

Obracanie wokół rogu: transform-origin

Element domyślnie obraca się wokół swojego środka. transform-origin przesuwa punkt obrotu. Wskazówka zegara obraca się wokół swojego końca, a nie środka:

<!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>

Dolny koniec wskazówki leży na bursztynowym sworzniu na środku tarczy, a rotate: 120deg obraca ją na czwartą. Usuń linijkę z transform-origin, a wskazówka będzie się obracać wokół własnego środka, poza sworzniem.

Obracanie tekstu i pionowe etykiety

Niewielkie przechylenie przez rotate sprawdza się przy plakietce czy naklejce. Dla naprawdę pionowej etykiety lepsze jest writing-mode, bo zmienia układ: element staje się wysoki i wąski, zamiast zachodzić na to, co jest obok.

<!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>

Odczyt pokazuje rozmiar każdej etykiety w układzie. Obrócona nadal zajmuje swoje pierwotne szerokie i niskie pudełko: zostawia obok pustą przerwę i wystaje nad i pod swój wiersz, na to, co tam jest. Ta z writing-mode zajmuje wysokie, wąskie pudełko. Dodanie rotate: 180deg sprawia, że czyta się ją od dołu do góry, co jest typowym kierunkiem dla pionowej etykiety.

Obracanie ikony po kliknięciu lub najechaniu

Obrócenie strzałki o 180 stopni to standardowy sposób, żeby pokazać, że sekcja jest otwarta. Połącz rotate z przejściem:

<!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>

Szewron to kwadrat z dwoma obramowaniami, obrócony o 45 stopni, żeby wskazywał w dół. Gdy przycisk jest rozwinięty, obraca się do 225 stopni i wskazuje w górę, a przejście animuje ten półobrót. Styl zależy od atrybutu aria-expanded, więc stan wizualny i stan ogłaszany przez czytniki ekranu nigdy się nie rozjadą.

Kręcący się wskaźnik ładowania

Kręcenie to obrót od 0 do 360 stopni, powtarzany z czasem linear, żeby prędkość się nie zmieniała:

<!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>

Przy samej klatce to animacja zaczyna od własnego obrotu elementu (brak) i kończy na 360deg, a infinite powtarza ją bez skoku, bo 360deg wygląda tak samo jak 0. Dla osób, które poprosiły system o ograniczenie ruchu, wskaźnik obraca się trzy razy wolniej. Więcej o klatkach kluczowych na stronie o animacjach.

Obrót 3D: rotateX, rotateY

rotateX() przechyla element do tyłu wokół osi poziomej, a rotateY() obraca go wokół osi pionowej, jak drzwi. Bez perspektywy wyglądają tylko na spłaszczone; perspective na rodzicu dodaje głębię:

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

Żeby odbić element lustrzanie zamiast go obracać, użyj scale: -1 1 (odbicie w poziomie). Obrót o 180 stopni odwraca go do góry nogami, a to nie to samo.

Częste błędy

Obracanie <span> lub <a>, które stoi w miejscu. Zwykłe elementy liniowe ignorują transformacje. Dodaj display: inline-block.
Obrót, który znika przy najechaniu. Reguła hover z transform: scale(1.1) zastępuje transform: rotate(...). Użyj osobnych właściwości rotate i scale albo wypisz obie funkcje.
Oczekiwanie, że układ zrobi miejsce. Obrócony obrazek zachowuje swoje nieobrócone pudełko i zachodzi na sąsiadów. Daj kontenerowi obrócony rozmiar albo użyj writing-mode dla tekstu.
Wskaźniki ładowania z ease. Domyślny czas przyspiesza i zwalnia w każdym obrocie. Użyj linear.
Obracanie wokół złego punktu. Ustaw transform-origin, zanim zaczniesz dopracowywać kąt.

Najczęściej zadawane pytania

Jak obrócić element w CSS?

Użyj transform: rotate(45deg); albo osobnej właściwości rotate: 45deg;. Dodatnie kąty obracają zgodnie z ruchem wskazówek zegara, a ujemne przeciwnie, wokół środka elementu, chyba że zmienisz transform-origin.

Czym różni się transform: rotate() od właściwości rotate?

Dają ten sam wynik. Właściwość rotate jest niezależna od transform, więc reguła hover może zmienić scale albo translate bez usuwania obrotu, a każda może mieć własne przejście. Razem działają jak transform: translate() rotate() scale(), bez względu na kolejność, w jakiej je zadeklarujesz.

Jak obrócić obrazek o 90 stopni w CSS?

Dodaj transform: rotate(90deg); (albo rotate: 90deg;) do img. Obrazek zachowuje w układzie swoje pierwotne miejsce, więc wysoki obrazek obrócony do poziomu może zachodzić na sąsiadów; daj jego kontenerowi miejsce na obrócony rozmiar.

Jak sprawić, żeby element kręcił się w CSS?

Zdefiniuj @keyframes spin { to { rotate: 360deg; } } i zastosuj animation: spin 1s linear infinite;. Użyj linear, żeby prędkość była stała, i spowolnij albo zatrzymaj animację przy prefers-reduced-motion: reduce.

Jak obrócić tekst pionowo w CSS?

Dla pionowej etykiety writing-mode: vertical-rl jest zwykle lepsze niż rotate(90deg), bo zmienia też układ: element zajmuje miejsce w pionie zamiast zachodzić na inne. Używaj rotate do drobnych, dekoracyjnych przechyleń.

Powiązane zagadnienia