Szukaj…


Składnia

  • Obróć transformację
  • transform: rotate (<angle>)
  • Przetłumacz Transform
  • przekształcać: tłumaczyć (<długość lub procent> [, <długość lub procent>]?)
  • transform: translateX (<long-or-percentage>)
  • transform: translateY (<long-or-percentage>)
  • Przekształcenie skośne
  • transform: skew (<angle> [, <angle>]?)
  • transform: skewX (<angle>)
  • transform: skewY (<angle>)
  • Skaluj transformację
  • transform: scale (<współczynnik skali> [, <współczynnik skali>]?)
  • transform: scaleX (<współczynnik skali>)
  • transform: scaleY (<scale-factor>)
  • Matrix Transform
  • transform: matrix (<numer> [, <numer>] {5,5})

Parametry

Funkcja / parametr Detale
rotate(x) Definiuje transformację, która przesuwa element wokół stałego punktu na osi Z.
translate(x,y) Przesuwa pozycję elementu na osi X i Y.
translateX(x) Przesuwa pozycję elementu na osi X.
translateY(y) Przesuwa pozycję elementu na osi Y.
scale(x,y) Zmienia rozmiar elementu na osi X i Y.
scaleX(x) Zmienia rozmiar elementu na osi X.
scaleY(y) Zmienia rozmiar elementu na osi Y.
skew(x,y) Mapowanie na ścinanie lub transwekcja, zniekształcające każdy punkt elementu o określony kąt w każdym kierunku
skewX(x) Odwzorowanie ścinania poziomego zniekształcające każdy punkt elementu o określony kąt w kierunku poziomym
skewY(y) Mapowanie ścinania pionowego zniekształcające każdy punkt elementu o określony kąt w kierunku pionowym
matrix() Definiuje transformację 2D w postaci macierzy transformacji.
kąt Kąt, o jaki element powinien być obracany lub pochylany (w zależności od funkcji, z jaką jest używany). Kąt ten może znajdować się w stopniach ( deg ), gradians ( grad ), radianach ( rad ) lub zwojów ( turn ). W funkcji skew() drugi kąt jest opcjonalny. Jeśli nie zostanie podany, nie będzie (0) przekrzywienia w osi Y.
długość lub procent Odległość wyrażona jako długość lub procent, o który należy przetłumaczyć element. W funkcji translate() druga długość lub procent jest opcjonalna. Jeśli nie zostanie podany, nie byłoby tłumaczenia (0) na osi Y.
Współczynnik skali Liczba określająca, ile razy element powinien być przeskalowany w określonej osi. W funkcji scale() drugi współczynnik skali jest opcjonalny. Jeśli nie zostanie podany, pierwszy współczynnik skali zostanie zastosowany również dla osi Y.

Uwagi

System 2D Coordiante

Transformacje są wykonywane zgodnie z układem współrzędnych 2D X / Y. Oś X biegnie od prawej do lewej, a oś Y idzie w dół, jak pokazano na poniższym obrazku:

Układ współrzędnych 2D CSS

Więc pozytywne translateY() idzie w dół, a pozytywne translateX() idzie w prawo.

Obsługa przeglądarki i prefiksy

  • IE obsługuje tę właściwość od IE9 z prefiksem -ms- . Starsze wersje i Edge nie potrzebują prefiksu
  • Firefox obsługuje go od wersji 3.5 i wymaga prefiksu -moz- do wersji 15
  • Chrome od wersji 4 i do wersji 34 wymaga prefiksu -webkit-
  • Safari potrzebuje przedrostka -webkit- do wersji 8
  • Opera potrzebuje prefiksu -o- dla wersji 11.5 i prefiksu -webkit- od wersji 15 do 22
  • Android potrzebuje prefiksu -webkit- od wersji 2.1 do 4.4.4

Przykład prefiksu transformacji:

-webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
        transform: rotate(45deg);

Obracać się

HTML

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

CSS

.rotate {
    width: 100px;
    height: 100px;
    background: teal;
    transform: rotate(45deg);
}

Ten przykład obróci div o 45 stopni w prawo. Środek obrotu znajduje się w środku div, 50% od lewej i 50% od góry. Możesz zmienić środek obrotu, ustawiając właściwość transform-origin .

transform-origin: 100% 50%;

Powyższy przykład ustawi środek obrotu na środek prawego końca.

Skala

HTML

<div class="scale"></div>

CSS

.scale {
    width: 100px;
    height: 100px;
    background: teal;
    transform: scale(0.5, 1.3);
}

Ten przykład przeskaluje div do 100px * 0.5 = 50px na osi X i do 100px * 1.3 = 130px na osi Y.

Centrum transformacji znajduje się w środku div, 50% od lewej i 50% od góry.

Tłumaczyć

HTML

<div class="translate"></div>

CSS

.translate {
    width: 100px;
    height: 100px;
    background: teal;
    transform: translate(200px, 50%);
}

Ten przykład spowoduje przesunięcie div o 100px * 50% = 50px osi X i o 100 100px * 50% = 50px na osi Y.

Możesz także określić tłumaczenia na jednej osi.

Na osi X:

.translate {
    transform: translateX(200px);
}

Na osi Y:

.translate {
    transform: translateY(50%);
}

Ukośnie

HTML

<div class="skew"></div>

CSS

.skew {
    width: 100px;
    height: 100px;
    background: teal;
    transform: skew(20deg, -30deg);
}

Ten przykład przekrzywi div o 20 stopni na osi X i o - 30 stopni na osi Y.
Centrum transformacji znajduje się w środku div, 50% od lewej i 50% od góry.

Zobacz wynik tutaj .

Wiele transformacji

Wiele transformacji można zastosować do elementu w jednej właściwości, takiej jak ta:

transform: rotate(15deg) translateX(200px);

Spowoduje to obrócenie elementu o 15 stopni w kierunku zgodnym z ruchem wskazówek zegara, a następnie przeniesienie go o 200 pikseli w prawo.

W przekształceniach łańcuchowych układ współrzędnych porusza się wraz z elementem . Oznacza to, że translacja nie będzie pozioma, ale na osi obróci się o 15 stopni zgodnie z ruchem wskazówek zegara, jak pokazano na poniższym obrazku:

Wiele transformacji obraca się, a następnie tłumaczy

Zmiana kolejności przekształceń spowoduje zmianę wyniku. Pierwszy przykład będzie inny niż

transform: translateX(200px) rotate(15deg);
<div class="transform"></div>
.transform {
  transform: rotate(15deg) translateX(200px);
}

Jak pokazano na tym obrazku:

Wiele transformacji tłumaczy, a następnie obraca

Przekształć pochodzenie

Transformacje są wykonywane w odniesieniu do punktu, który jest zdefiniowany przez właściwość transform-origin .

Właściwość przyjmuje 2 wartości: transform-origin: XY;

W poniższym przykładzie pierwszy div ( .tl ) jest .tl wokół lewego górnego rogu z transform-origin: 0 0; a drugi ( .tr ) jest przekształcany wokół jego prawego górnego rogu z transform-origin: 100% 0 . Obrót jest stosowany po najechaniu myszą :

HTML:

<div class="transform originl"></div>
<div class="transform origin2"></div>

CSS:

.transform {
    display: inline-block;
    width: 200px;
    height: 100px;
    background: teal;
    transition: transform 1s;
}

.origin1 {
    transform-origin: 0 0;
}

.origin2 {
    transform-origin: 100% 0;
}

.transform:hover {
    transform: rotate(30deg);
}

Domyślna wartość właściwości transform-origin wynosi 50% 50% co stanowi środek elementu.



Modified text is an extract of the original Stack Overflow Documentation
Licencjonowany na podstawie CC BY-SA 3.0
Nie związany z Stack Overflow