CSS
Transformacje 2D

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

Uwagi

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

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:

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.