CSS
Trasformazioni 2D

Sintassi

• Ruota Trasforma
• trasforma: ruota (<angolo>)
• Traduci Trasforma
• transform: translate (<lunghezza o percentuale> [, lunghezza o percentuale>]?)
• transform: translateX (<lunghezza o percentuale>)
• transform: translateY (<lunghezza o percentuale>)
• Traslazione obliqua
• transform: skew (<angle> [, <angle>]?)
• trasforma: skewX (<angle>)
• trasformare: skewY (<angle>)
• Trasforma la scala
• transform: scale (<fattore-scala> [, <fattore-scala>]?)
• transform: scaleX (<fattore di scala>)
• transform: scaleY (<fattore di scala>)
• Matrix Transform
• transform: matrix (<numero> [, <numero>] {5,5})

Parametri

Osservazioni

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

Ruotare

HTML

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

CSS

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

Questo esempio ruoterà il div di 45 gradi in senso orario. Il centro di rotazione si trova al centro del div, 50% da sinistra e 50% dall'alto. Puoi cambiare il centro di rotazione impostando la proprietà transform-origin .

transform-origin: 100% 50%;

L'esempio sopra imposterà il centro di rotazione al centro del lato destro.

Scala

HTML

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

CSS

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

Questo esempio ridimensiona il div a 100px * 0.5 = 50px sull'asse X ea 100px * 1.3 = 130px sull'asse Y.

Il centro della trasformazione si trova al centro del div, 50% da sinistra e 50% dall'alto.

Tradurre

HTML

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

CSS

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

Questo esempio sposterà il div di 200px sull'asse X e di 100px * 50% = 50px sull'asse Y.

Puoi anche specificare le traduzioni su un singolo asse.

Sull'asse X:

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

Sull'asse Y:

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

Storto

HTML

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

CSS

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

Questo esempio inclina il div di 20 gradi sull'asse X e di -30 gradi sull'asse Y.
Il centro della trasformazione si trova al centro del div, 50% da sinistra e 50% dall'alto.

Vedi il risultato qui .

Trasformazioni multiple

Più trasformazioni possono essere applicate a un elemento in una proprietà come questa:

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

Questo ruoterà l'elemento di 15 gradi in senso orario e poi lo tradurrà a 200px a destra.

Nelle trasformazioni concatenate, il sistema di coordinate si sposta con l'elemento . Ciò significa che la traduzione non sarà orizzontale ma su un asse ruoterà di 15 gradi in senso orario come mostrato nell'immagine seguente:

Cambiando l'ordine delle trasformazioni cambierà l'output. Il primo esempio sarà diverso da

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

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

.transform {
  transform: rotate(15deg) translateX(200px);
}

Come mostrato in questa immagine:

Trasforma l'origine

Le trasformazioni vengono eseguite rispetto a un punto definito dalla proprietà transform-origin .

La proprietà accetta 2 valori: transform-origin: XY;

Nell'esempio seguente la prima div ( .tl ) ruota intorno all'angolo in alto a sinistra con transform-origin: 0 0; e il secondo ( .tr ) viene trasformato attorno al suo angolo in alto a destra con transform-origin: 100% 0 . La rotazione viene applicata al passaggio del mouse :

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);
}

Il valore predefinito per la proprietà transform-origin è 50% 50% che rappresenta il centro dell'elemento.