Como aplicar várias transformações em CSS?

Usando CSS, como posso aplicar mais de um transform?

Exemplo: A seguir, apenas a tradução é aplicada, não a rotação.

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

Você deve colocá-los em uma linha como esta:

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

Quando você possui várias diretivas de transformação, apenas a última será aplicada. É como qualquer outra regra CSS.

Lembre-se de que várias diretivas de transformação de uma linha são aplicadas da direita para a esquerda .

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

vai não produzem o mesmo resultado:

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

Estou adicionando esta resposta não porque é provável que seja útil, mas apenas porque é verdadeira.

Além de usar as respostas existentes que explicam como fazer mais de uma tradução encadeando-as, você também pode construir a matriz 4x4

Peguei a seguinte imagem de algum site aleatório que encontrei enquanto pesquisava no Google que mostra matrizes rotacionais:

Rotação em torno do eixo x:
Rotação em torno do eixo y:
Rotação em torno do eixo z:

Não consegui encontrar um bom exemplo de tradução, portanto, assumindo que me lembro / entendi direito, tradução:

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

Veja mais no artigo da Wikipedia sobre transformação , bem como no tutorial Pragamatic CSS3, que explica muito bem. Outro guia que encontrei que explica matrizes de rotação arbitrárias são as anotações de Egon Rath sobre matrizes

A multiplicação de matrizes funciona entre essas matrizes 4x4, é claro, para executar uma rotação seguida por uma tradução, faça a matriz de rotação apropriada e multiplique-a pela matriz de tradução.

Isso pode dar a você um pouco mais de liberdade para acertar e também tornará praticamente impossível para qualquer um entender o que está fazendo, incluindo você em cinco minutos.

Mas, você sabe, funciona.

Edit: Acabei de perceber que deixei de mencionar provavelmente o uso mais importante e prático disso, que é incrementalmente criar transformações 3D complexas via JavaScript, onde as coisas farão um pouco mais de sentido.

Você também pode aplicar várias transformações usando uma camada extra de marcação, por exemplo:

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

Isso pode ser realmente útil ao animar elementos com transformações usando Javascript.

Você pode aplicar mais de uma transformação como esta:

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

Em algum momento no futuro, podemos escrever assim:

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

Isso se tornará especialmente útil ao aplicar classes individuais em um elemento:

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

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

Essa sintaxe é definida na especificação CSS Transforms Level 2 em andamento , mas não pode encontrar nada sobre o suporte atual do navegador que não seja o chrome canary. Espero que algum dia eu volte e atualize o suporte ao navegador aqui;)

Encontrei as informações deste artigo que você pode consultar sobre soluções alternativas para navegadores atuais.

Basta começar a partir daí que, em CSS , se você repetir 2 valores ou mais, o último sempre será aplicado, a menos que você use a !importanttag, mas ao mesmo tempo evite usar !importanto máximo que puder, portanto, no seu caso, esse é o problema, então o segundo transformar substituir o primeiro neste caso ...

Então, como você pode fazer o que deseja, então? ...

Não se preocupe , o transform aceita vários valores ao mesmo tempo ... Portanto, este código abaixo funcionará:

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

Se você gosta de brincar com a transformação, execute o iframe do MDN abaixo:

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

Veja o link abaixo para mais informações:

<< transformação CSS >>

Transforme Girar e Traduzir em uma única linha css: -Como?

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>