# Przekształcanie elementów (transform)

Dzięki właściwości `transform` możemy przekształcać nasze obiekty w różny sposób. Zajmiemy się przypadkami w przestrzeni 2D. Możliwe operacje to skalowanie (zwiększanie, zmniejszanie), przesuwanie po osi X i po osi Y, obrót oraz pochylenie.

### Przesuwanie

#### Przesuwanie wzdłuż osi X

Przesuwanie wzdłuż osi X, czyli w prawo lub w lewo, to właściwość `translateX(wartość)`. W poniższym przykładzie element zostanie przesunięty o 150px w prawo.

```css
    transform: translateX(150px);
```

Spróbujmy do naszej wartości dodać znak `-`. W wyniku poniższej deklaracji element zostanie przesunięty o 150px w lewo.

```css
    transform: translateX(-150px);
```

#### Przesuwanie wzdłuż osi Y

Przesuwanie wzdłuż osi Y, czyli w górę lub w dół, to właściwość `translateY(wartość)`. W poniższym przykładzie element zostanie przesunięty w górę o 150px.

```css
    transform: translateY(150px);
```

Zaś w tym przykładzie, element przesunięty zostanie 150px w dół, gdyż przed wartością pojawił się znak `-`.

```css
    transform: translateY(-150px);
```

### Obracanie

Dowolne elementy możemy obracać przy wykorzystaniu właściwości `rotate(wartość)`. Wartość podawana jest w stopniach (`deg`).

Zobaczmy, co stanie się z kwadratem, do którego przypiszemy poniższą właściwość:

```css
    transform: rotate(45deg);
```

Jak widać, element został obrócony o 45 stopni.

Obroty mogą być dokonywane według trzech osi: X, Y i Z.

```css
    rotateX(45deg);
    rotateY(45deg);
    rotateZ(45deg);
```

### Skalowanie

Wybrany element możemy powiększać lub pomniejszać podając odpowiednie wartości we właściwości

```css
    transform: scale(wartość);
```

Wartości poniżej 1 będą pomniejszać element, zaś powyżej 1 – powiększać nasz obiekt. Obiekty od lewej posiadają wartości `scale(0.8)`, `scale(1)` i `scale(1.2)`.

#### Skalowanie na `:hover`

Przy zastosowaniu pseudoklasy `:hover` możemy tworzyć ciekawe efekty związane ze skalowaniem.

kliknij!

```css
.button-ch-anim-scale {
    background-color: salmon;
    padding: 20px 100px;
    display: inline-block;
    margin: 20px 0;
    transition: all 0.3 ease-in-out;
}

.button-ch-anim-scale:hover {
    transform: scale(1.2);  
}
```

#### Skalowanie na osi X i Y

Skalowanie może się też odbywać tylko na wybranej osi. Służą do tego właściwości:

`transform: scaleX(wartość);`

`transform: scaleY(wartość);`

### Pochylenie

Pochylenie ("przekoszenie") elementu może wystepować na dwóch osiach: X i Y. Pochylenie na osi X definiujemy poprzez właściwość: `transform: skewX(wartość);` zaś na osi Y: `transform: skewY(wartość);`. Wartość podawana jest w stopniach (`deg`).

Elementy o właściwościach (od lewej) `skewX(10deg)`, `skewX(0)` i `skewX(-10deg)`:

Elementy o właściwościach (od lewej) `skewY(10deg)`, `skewY(0)` i `skewY(-10deg)`:

### Złożone przekształcenia

Przekształcenia mogą być kombinacją kilku operacji. Jeśli chcielibyśmy, aby nasz element przeskalował się i przesunął wzdłuż osi X, dodajemy do niego poniższą właściwość:

`transform: scale(1.05) translateX(150px);`

Czyli połączenie operacji polega na wymienieniu ich w odpowiedniej kolejności, jedna po drugiej, oddzielonych spacją.


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://the-awwwesomes-2.gitbook.io/tutorial-the-awwwesomes-html-and-css/the-awwwesomes-tutorial-www-beginners-2/przeksztalcanie-elementow-transform.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.