Transformacje

Nieoficjalne Tłumaczenie Beta

Ta strona została przetłumaczona przez PageTurner AI (beta). Nie jest oficjalnie zatwierdzona przez projekt. Znalazłeś błąd? Zgłoś problem →

Transformacje to właściwości stylów, które pomagają modyfikować wygląd i pozycję komponentów przy użyciu przekształceń 2D lub 3D. Jednak po zastosowaniu transformacji układ wokół przekształconego komponentu pozostaje taki sam, co może powodować nakładanie się na sąsiednie komponenty. Aby zapobiec takim nakładaniom, możesz zastosować margines do przekształconego komponentu, sąsiednich komponentów lub wewnętrzny margines (padding) do kontenera.

Przykład

---

Dokumentacja

Transformacja

transform przyjmuje tablicę obiektów transformacji lub wartości w formie ciągów znaków rozdzielonych spacjami. Każdy obiekt określa właściwość, która ma zostać przekształcona, jako klucz oraz wartość do użycia w transformacji. Obiektów nie należy łączyć. Używaj jednej pary klucz/wartość na obiekt.

Transformacje obrotu wymagają ciągu znaków, aby transformacja mogła być wyrażona w stopniach (deg) lub radianach (rad). Na przykład:

js

{
  transform: [{rotateX: '45deg'}, {rotateZ: '0.785398rad'}],
}

To samo można osiągnąć za pomocą ciągu znaków rozdzielonych spacjami:

js

{
  transform: 'rotateX(45deg) rotateZ(0.785398rad)',
}

Transformacje pochylenia (skew) wymagają ciągu znaków, aby transformacja mogła być wyrażona w stopniach (deg). Na przykład:

js

{
  transform: [{skewX: '45deg'}],
}

Transformacja macierzowa

Transformacja matrix przyjmuje macierz transformacji 4x4 jako tablicę 16 liczb. Pozwala to na zastosowanie złożonych przekształceń łączących translację, obrót, skalowanie i pochylenie w jednej operacji.

Macierz jest określona w kolejności kolumnowej (column-major):

js

{
  transform: [
    {
      matrix: [
        scaleX,
        skewY,
        0,
        0,
        skewX,
        scaleY,
        0,
        0,
        0,
        0,
        1,
        0,
        translateX,
        translateY,
        0,
        1,
      ],
    },
  ];
}

Na przykład, aby zastosować kombinację skalowania i pochylenia:

js

{
  transform: [
    {
      matrix: [
        1, 0.5, 0, 0, 0.5, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1,
      ],
    },
  ];
}

uwaga

Transformacje macierzowe są przydatne, gdy trzeba zastosować wcześniej obliczone macierze transformacji, np. z bibliotek animacji lub podczas tworzenia aplikacji edytora UI. W przypadku podstawowych przekształceń zaleca się używanie indywidualnych właściwości transformacji (scale, rotate, translate itp.), ponieważ są bardziej czytelne.

Type	Required
array of objects: {matrix: number[]}, {perspective: number}, {rotate: string}, {rotateX: string}, {rotateY: string}, {rotateZ: string}, {scale: number}, {scaleX: number}, {scaleY: number}, {translateX: number}, {translateY: number}, {skewX: string}, {skewY: string} or string	No

---

decomposedMatrix, rotation, scaleX, scaleY, transformMatrix, translateX, translateY

Przestarzałe

Zamiast tego użyj właściwości transform.

Punkt odniesienia transformacji (Transform Origin)

Właściwość transformOrigin ustawia punkt odniesienia dla transformacji widoku. Punkt odniesienia transformacji to miejsce, wokół którego stosuje się przekształcenie. Domyślnie punktem odniesienia transformacji jest center.

Przykład

Wartości

Punkt odniesienia transformacji obsługuje wartości px, percentage oraz słowa kluczowe top, left, right, bottom, center.

Właściwość transformOrigin może być określona za pomocą jednej, dwóch lub trzech wartości, gdzie każda wartość reprezentuje przesunięcie.

Składnia z jedną wartością:

• Wartość musi być px, percentage lub jednym ze słów kluczowych left, center, right, top, bottom.

js

{
  transformOrigin: '20px',
  transformOrigin: 'bottom',
}

Składnia z dwiema wartościami:

• Pierwsza wartość (przesunięcie X) musi być px, percentage lub jednym ze słów kluczowych left, center, right.

• Druga wartość (przesunięcie Y) musi być px, percentage lub jednym ze słów kluczowych top, center, bottom.

js

{
  transformOrigin: '10px 2px',
  transformOrigin: 'left top',
  transformOrigin: 'top right',
}

Składnia z trzema wartościami:

• Pierwsze dwie wartości są takie same jak w składni z dwiema wartościami.

• Trzecia wartość (przesunięcie Z) musi być px. Zawsze reprezentuje przesunięcie w osi Z.

js

{
  transformOrigin: '2px 30% 10px',
  transformOrigin: 'right bottom 20px',
}

Składnia tablicowa

transformOrigin obsługuje również składnię tablicową. Ułatwia to użycie z interfejsami API animacji (Animated APIs). Unika również parsowania ciągów znaków, więc powinno być bardziej wydajne.

js

{
  // Using numeric values
  transformOrigin: [10, 30, 40],
  // Mixing numeric and percentage values
  transformOrigin: [10, '20%', 0],
}

Dodatkowe informacje można znaleźć w przewodniku MDN na temat Punktu odniesienia transformacji.