Dokumentacja CSS z przykładami: Transform

Q: Co robi transform w CSS?

Zmienia sposób rysowania elementu: przesunięty (translate), zmieniony rozmiar (scale), obrócony (rotate) albo pochylony (skew). Element zachowuje swoje pierwotne miejsce w układzie, więc elementy wokół niego się nie przesuwają.

Q: Jak zastosować kilka transformacji w CSS?

Wypisz je w jednej wartości transform, oddzielając spacjami: transform: translateX(50px) rotate(20deg) scale(1.2);. Druga deklaracja transform zastępuje pierwszą, zamiast się do niej dodawać.

Co robi transform

transform zmienia sposób rysowania elementu: przesunięcie, skalowanie, obrót lub pochylenie. Przerywane kontury poniżej pokazują, gdzie byłoby każde pudełko bez transformacji:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Transform functions</title>
  <style>
    body { font-family: system-ui, sans-serif; font-size: 13px; }
    .row { display: flex; gap: 40px; padding: 30px 20px; }
    .slot { outline: 2px dashed #9ca3af; width: 90px; height: 60px; }
    .box { width: 90px; height: 60px; background: #2563eb; color: white; display: grid; place-items: center; }
    .t1 { transform: translate(20px, 10px); }
    .t2 { transform: scale(1.3); background: #16a34a; }
    .t3 { transform: rotate(20deg); background: #f59e0b; color: #111827; }
    .t4 { transform: skewX(-20deg); background: #111827; }
  </style>
</head>
<body>
  <div class="row">
    <div class="slot"><div class="box t1">translate</div></div>
    <div class="slot"><div class="box t2">scale</div></div>
    <div class="slot"><div class="box t3">rotate</div></div>
    <div class="slot"><div class="box t4">skewX</div></div>
  </div>
</body>
</html>

translate(20px, 10px) przesuwa niebieskie pudełko o 20px dalej i 10px w dół. scale(1.3) powiększa zielone o 30% wokół jego środka. rotate(20deg) obraca bursztynowe zgodnie z ruchem wskazówek zegara, a skewX(-20deg) pochyla ciemne. W każdym przypadku przerywane miejsce, czyli przestrzeń, którą element zajmuje w układzie, zostaje dokładnie tam, gdzie było.

Funkcje transformacji

Funkcja	Robi	Przykład
`translate(x, y)`	przesuwa	`translate(20px, -10px)`, `translate(-50%, -50%)`
`translateX(x)` / `translateY(y)`	przesuwa w jednej osi	`translateY(-4px)`
`scale(s)` / `scale(x, y)`	zmienia rozmiar (1 = oryginał, 0.5 = połowa, ujemna wartość odbija)	`scale(1.1)`, `scale(-1, 1)`
`scaleX(s)` / `scaleY(s)`	zmienia rozmiar w jednej osi	`scaleX(0.5)`
`rotate(angle)`	obraca zgodnie z ruchem wskazówek zegara (ujemny kąt = przeciwnie)	`rotate(45deg)`, `rotate(0.25turn)`
`skew(x, y)` / `skewX(a)` / `skewY(a)`	pochyla	`skewX(-15deg)`
`matrix(a, b, c, d, e, f)`	wszystko powyżej w jednej macierzy, głównie to, co zwraca przeglądarka
`none`	brak transformacji

Procenty w translate() odnoszą się do własnego rozmiaru elementu, a nie rodzica. Obrót ma własną stronę ze stopniami, obrotami i kręceniem: CSS rotate.

Edytor online transformacji

Przesuwaj suwaki. Pierwsza linijka to zbudowana przez ciebie wartość transform; druga to macierz, którą przeglądarka z niej obliczyła, czyli to, co getComputedStyle zwraca dla każdej transformacji:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Transform playground</title>
  <style>
    body { font-family: system-ui, sans-serif; font-size: 13px; }
    .controls { display: grid; grid-template-columns: repeat(2, max-content); gap: 4px 16px; }
    .stage { height: 170px; display: grid; place-items: center; background: #f3f4f6; margin: 10px 0; overflow: hidden; }
    #box { width: 80px; height: 80px; background: #2563eb; color: white; display: grid; place-items: center; border-radius: 6px; }
    code { display: block; }
  </style>
</head>
<body>
  <div class="controls">
    <label>translateX <input type="range" data-f="translateX" data-u="px" min="-120" max="120" value="0"></label>
    <label>scale <input type="range" data-f="scale" data-u="" min="0.5" max="1.8" step="0.1" value="1"></label>
    <label>rotate <input type="range" data-f="rotate" data-u="deg" min="-180" max="180" value="0"></label>
    <label>skewX <input type="range" data-f="skewX" data-u="deg" min="-40" max="40" value="0"></label>
  </div>
  <div class="stage"><div id="box">Box</div></div>
  <code id="value"></code>
  <code id="matrix"></code>
  <script>
    const box = document.getElementById('box');
    const inputs = document.querySelectorAll('input');
    const update = () => {
      const t = [...inputs].map((i) => i.dataset.f + '(' + i.value + i.dataset.u + ')').join(' ');
      box.style.transform = t;
      document.getElementById('value').textContent = 'transform: ' + t + ';';
      document.getElementById('matrix').textContent = 'computed: ' + getComputedStyle(box).transform;
    };
    inputs.forEach((i) => i.addEventListener('input', update));
    update();
  </script>
</body>
</html>

Transformacje nie przesuwają układu

Przetransformowany element jest rysowany gdzie indziej, ale strona jest układana tak, jakby transformacji nie było. Jego sąsiedzi zachowują swoje pozycje. Właśnie dlatego transformacje dobrze sprawdzają się w efektach hover i animacjach: nic wokół nie jest przeliczane.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>No reflow</title>
  <style>
    body { font-family: system-ui, sans-serif; font-size: 13px; }
    .row { display: flex; gap: 10px; padding: 24px 10px; }
    .row div { width: 80px; height: 50px; background: #e5e7eb; display: grid; place-items: center; }
    .row .grow-t { transform: scale(1.5); background: #16a34a; color: white; }
    .row .grow-w { width: 120px; height: 75px; background: #f59e0b; }
  </style>
</head>
<body>
  <div class="row" id="a"><div>A</div><div class="grow-t">scale(1.5)</div><div id="c1">C</div></div>
  <div class="row" id="b"><div>A</div><div class="grow-w">width 120px</div><div id="c2">C</div></div>
  <p id="out"></p>
  <script>
    document.getElementById('out').textContent =
      'C starts at x = ' + document.getElementById('c1').offsetLeft + 'px next to the scaled box, and at x = ' +
      document.getElementById('c2').offsetLeft + 'px next to the resized one.';
  </script>
</body>
</html>

Oba środkowe pudełka wyglądają na 1.5 raza większe. Przeskalowane zachodzi na sąsiadów, a C zostaje na miejscu; to powiększone przez width i height spycha C o 40px dalej.

Wiele transformacji i ich kolejność

Umieść kilka funkcji w jednym transform, oddzielając je spacjami. Kolejność zmienia wynik, bo czytając od lewej do prawej, każda funkcja działa w układzie współrzędnych pozostawionym przez wcześniejsze funkcje:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Transform order</title>
  <style>
    body { font-family: system-ui, sans-serif; font-size: 13px; }
    .stage { position: relative; height: 170px; background: #f3f4f6; }
    .box { position: absolute; top: 20px; left: 20px; width: 60px; height: 40px; opacity: 0.85; }
    .a { transform: translateX(120px) rotate(45deg); background: #2563eb; }
    .b { transform: rotate(45deg) translateX(120px); background: #16a34a; }
  </style>
</head>
<body>
  <div class="stage"><div class="box a"></div><div class="box b"></div></div>
  <p id="out"></p>
  <script>
    const center = (el) => { const r = el.getBoundingClientRect(); return Math.round(r.left + r.width / 2) + ', ' + Math.round(r.top + r.height / 2); };
    document.getElementById('out').textContent =
      'blue (translate then rotate) center: ' + center(document.querySelector('.a')) +
      '  |  green (rotate then translate) center: ' + center(document.querySelector('.b'));
  </script>
</body>
</html>

Niebieskie pudełko przesunęło się o 120px prosto, a potem obróciło się w miejscu. Zielone zostało najpierw obrócone, więc jego "oś x" biegnie po przekątnej, a translateX(120px) przesuwa je wzdłuż tej przekątnej. Te same funkcje, inne miejsce.

Druga pułapka: kolejna deklaracja transform zastępuje pierwszą. Jeśli karta ma transform: rotate(-2deg), a jej reguła hover mówi transform: scale(1.05), obrót znika po najechaniu. Powtórz obie (rotate(-2deg) scale(1.05)) albo użyj osobnych właściwości opisanych niżej.

transform-origin

Skalowanie, obracanie i pochylanie odbywa się wokół stałego punktu, punktu początkowego transformacji, którym domyślnie jest środek. Zmieniasz go słowami kluczowymi, długościami lub procentami:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>transform-origin</title>
  <style>
    body { font-family: system-ui, sans-serif; font-size: 13px; }
    .row { display: flex; gap: 50px; padding: 20px 30px 40px; }
    .slot { outline: 2px dashed #9ca3af; width: 80px; height: 50px; }
    .box { width: 80px; height: 50px; background: #2563eb; transform: rotate(25deg); }
    .tl { transform-origin: top left; }
    .br { transform-origin: bottom right; }
  </style>
</head>
<body>
  <div class="row">
    <div><code>center</code><div class="slot"><div class="box"></div></div></div>
    <div><code>top left</code><div class="slot"><div class="box tl"></div></div></div>
    <div><code>bottom right</code><div class="slot"><div class="box br"></div></div></div>
  </div>
</body>
</html>

Wszystkie trzy pudełka obracają się o 25 stopni. Pierwsze obraca się wokół środka, drugie trzyma lewy górny róg przypięty do rogu swojego miejsca, a trzecie prawy dolny róg. Rozwijane menu, które wyrasta ze swojego przycisku, używa transform-origin: top razem ze scale().

Właściwości translate, scale i rotate

Nowoczesne przeglądarki mają też trzy osobne właściwości, które robią to samo co funkcje, ale można je ustawiać i animować niezależnie:

.card {
  rotate: -2deg;
  transition: scale 0.2s ease-out;
}
.card:hover {
  scale: 1.05;   /* the rotation stays, because it is a different property */
}

Zawsze łączą się tak, jakby zapisano transform: translate(...) rotate(...) scale(...) przed dowolną wartością transform, bez względu na kolejność, w jakiej je zadeklarujesz. Zwróć uwagę na składnię: translate: 10px 20px i scale: 1.2 przyjmują wartości bez nawiasów funkcji.

Wyśrodkowanie przez translate(-50%, -50%)

Ponieważ procenty w translate() odnoszą się do własnego rozmiaru elementu, top: 50%; left: 50%; transform: translate(-50%, -50%) wyśrodkowuje w rodzicu element pozycjonowany absolutnie o dowolnym rozmiarze. Strona o wyśrodkowaniu diva porównuje to z flexboxem i grid.

Częste błędy

Dwie deklaracje transform. Późniejsza wygrywa w całości. Połącz funkcje albo użyj właściwości rotate, scale i translate.
Transformowanie elementu liniowego. Zwykły <span> lub <a> ignoruje transform. Nadaj mu inline-block.
Oczekiwanie, że sąsiedzi się przesuną. Transformacje nigdy nie zmieniają układu. Żeby zrobić miejsce, zmień width, margin albo gap.
Zła kolejność funkcji. rotate() przed translate() przesuwa wzdłuż obróconej osi.
Niespodzianki z dziećmi position: fixed. Przetransformowany element staje się blokiem zawierającym dla potomków z pozycją fixed, więc stały nagłówek w jego wnętrzu przewija się razem z nim. Tworzy też nowy kontekst nakładania dla z-index.

Najczęściej zadawane pytania

Co robi transform w CSS?

Zmienia sposób rysowania elementu: przesunięty (translate), zmieniony rozmiar (scale), obrócony (rotate) albo pochylony (skew). Element zachowuje swoje pierwotne miejsce w układzie, więc elementy wokół niego się nie przesuwają.

Jak zastosować kilka transformacji w CSS?

Wypisz je w jednej wartości transform, oddzielając spacjami: transform: translateX(50px) rotate(20deg) scale(1.2);. Druga deklaracja transform zastępuje pierwszą, zamiast się do niej dodawać.

Czy kolejność funkcji transformacji ma znaczenie?

Tak. Czytając od lewej do prawej, każda funkcja działa w osiach pozostawionych przez poprzednie, więc rotate(45deg) translateX(100px) przesuwa element wzdłuż obróconej osi, a translateX(100px) rotate(45deg) przesuwa go prosto, a potem obraca.

Czym jest transform-origin?

To stały punkt, wokół którego odbywa się skalowanie, obracanie i pochylanie. Domyślnie jest to środek (50% 50%). transform-origin: top left sprawia, że element rośnie od swojego lewego górnego rogu albo się wokół niego obraca.

Dlaczego transform nie działa na moim spanie?

Transformacje nie działają na niezastępowanych elementach liniowych, takich jak zwykły <span> czy <a>. Nadaj elementowi display: inline-block albo block, a transformacja zadziała.

Powiązane zagadnienia