Come applicare più trasformazioni nei CSS?

Utilizzando i CSS, come posso applicare più di uno transform?

Esempio: Di seguito viene applicata solo la traduzione, non la rotazione.

li:nth-child(2) {
    transform: rotate(15deg);
    transform: translate(-20px,0px);        
}

Devi metterli su una riga in questo modo:

li:nth-child(2) {
    transform: rotate(15deg) translate(-20px,0px);
}

Quando si dispone di più direttive di trasformazione, verrà applicata solo l'ultima. È come qualsiasi altra regola CSS.

Tieni presente che le direttive su una riga con trasformazione multipla vengono applicate da destra a sinistra .

Questo: transform: scale(1,1.5) rotate(90deg);
e:transform: rotate(90deg) scale(1,1.5);

sarà non lo stesso risultato:

.orderOne, .orderTwo {
  font-family: sans-serif;
  font-size: 22px;
  color: #000;
  display: inline-block;
}

.orderOne {
  transform: scale(1, 1.5) rotate(90deg);
}

.orderTwo {
  transform: rotate(90deg) scale(1, 1.5);
}

<div class="orderOne">
  A
</div>

<div class="orderTwo">
  A
</div>

Sto aggiungendo questa risposta non perché è probabile che sia utile, ma solo perché è vera.

Oltre a utilizzare le risposte esistenti che spiegano come effettuare più di una traduzione concatenandole, puoi anche costruire tu stesso la matrice 4x4

Ho preso la seguente immagine da qualche sito casuale che ho trovato mentre cercavo su google che mostra le matrici rotazionali:

Rotazione attorno all'asse x:
Rotazione attorno all'asse y:
Rotazione attorno all'asse z:

Non sono riuscito a trovare un buon esempio di traduzione, quindi supponendo di ricordarlo / capirlo bene, traduzione:

[1 0 0 0]
[0 1 0 0]
[0 0 1 0]
[x y z 1]

Vedi di più sull'articolo di Wikipedia sulla trasformazione e sul tutorial CSS3 Pragamatic che lo spiega piuttosto bene. Un'altra guida che ho trovato che spiega le matrici di rotazione arbitrarie sono le note di Egon Rath sulle matrici

La moltiplicazione della matrice funziona ovviamente tra queste matrici 4x4, quindi per eseguire una rotazione seguita da una traslazione, si crea la matrice di rotazione appropriata e la si moltiplica per la matrice di traslazione.

Questo può darti un po 'più di libertà per farlo nel modo giusto, e renderà anche praticamente impossibile per chiunque capire cosa sta facendo, incluso te in cinque minuti.

Ma sai, funziona.

Modifica: mi sono appena reso conto che mi mancava menzionare probabilmente l'uso più importante e pratico di questo, che è quello di creare in modo incrementale trasformazioni 3D complesse tramite JavaScript, dove le cose avranno un po 'più senso.

Puoi anche applicare più trasformazioni utilizzando un ulteriore livello di markup, ad esempio:

<h3 class="rotated-heading">
    <span class="scaled-up">Hey!</span>
</h3>
<style type="text/css">
.rotated-heading
{
    transform: rotate(10deg);
}

.scaled-up
{
    transform: scale(1.5);
}
</style>

Questo può essere davvero utile quando si animano elementi con trasformazioni utilizzando Javascript.

Puoi applicare più di una trasformazione in questo modo:

li:nth-of-type(2){
    transform : translate(-20px, 0px) rotate(15deg);
}

Qualche tempo in futuro, possiamo scriverlo in questo modo:

li:nth-child(2) {
    rotate: 15deg;
    translate:-20px 0px;        
}

Ciò sarà particolarmente utile quando si applicano singole classi su un elemento:

<div class="teaser important"></div>

.teaser{rotate:10deg;}
.important{scale:1.5 1.5;}

Questa sintassi è definita nella specifica CSS Transforms Level 2 in corso , ma non è possibile trovare nulla sul supporto del browser corrente diverso da Chrome Canary. Spero che un giorno tornerò e aggiornerò il supporto del browser qui;)

Trovate le informazioni in questo articolo che potreste voler controllare riguardo alle soluzioni alternative per i browser attuali.

Comincia da lì che nei CSS , se ripeti 2 o più valori, viene applicato sempre l'ultimo, a meno che tu non usi il !importanttag, ma allo stesso tempo evita di usare !importantil più possibile, quindi nel tuo caso questo è il problema, quindi il secondo trasforma ignora il primo in questo caso ...

Quindi come puoi fare quello che vuoi allora? ...

Non preoccuparti , transform accetta più valori contemporaneamente ... Quindi questo codice di seguito funzionerà:

li:nth-child(2) {
  transform: rotate(15deg) translate(-20px, 0px); //multiple
}

Se ti piace giocare con transform, esegui l'iframe dall'MDN di seguito:

<iframe src="https://interactive-examples.mdn.mozilla.net/pages/css/transform.html" class="interactive  " width="100%" frameborder="0" height="250"></iframe>

Guarda il link qui sotto per maggiori informazioni:

<< Trasformazione CSS >>

Trasforma Ruota e Traduci in css a riga singola: -Come?

div.className{
    transform : rotate(270deg) translate(-50%, 0);    
    -webkit-transform: rotate(270deg) translate(-50%, -50%);    
    -moz-transform: rotate(270deg) translate(-50%, -50%);    
    -ms-transform: rotate(270deg) translate(-50%, -50%);    
    -o-transform: rotate(270deg) translate(-50%, -50%); 
    float:left;
    position:absolute;
    top:50%;
    left:50%;
    }

<html>
<head>
</head>
<body>
<div class="className">
  <span style="font-size:50px">A</span>
</div>
</body>
</html>