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

605

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

Respostas:

995

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>

lukad
fonte
55
Tentei separá-los com um "," como se fosse feito com várias sombras, mas isso não funcionou. Obrigado.
Ben
2
é possível aplicar uma transformação antes de outra ... como inclinação antes de girar. Quanto a mim, não importa o que eu faça, o elemento é girado primeiro e depois inclinado, o que resulta em algo que não é o que eu quero.
Muhammad Umer
2
então hoje para dividi-los em várias linhas
aWebDeveloper
2
transformar: converter (100px, 100px) girar (45deg) converter (100px, 100px) girar (45deg); equals transform: translate (200px, 200px) rotate (90deg), o último será adicionado
bigCat 17/15
3
@ jave.web, você quis dizer da direita para a esquerda , correto? Pois transform: scale(1,1.5) rotate(90deg);, a rotação aconteceria antes da balança.
Jargs 16/01/19
43

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 x
Rotação em torno do eixo y: Rotação em torno do eixo y
Rotação em torno do eixo z: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.

Jeff
fonte
3
Infelizmente, o "site aleatório" em mines.edu agora é um link morto.
precisa
1
Como está o link dos 9elementos :(
Matt Sach
1
@MattSach Ok, aparentemente "hoje mais tarde" para mim significa "seis meses depois", mas pelo menos o link 9elements foi corrigido (alguém corrigiu o link de sites aleatórios com Wayback e eu segui a liderança deles).
Jeff
1
Também fiz isso para ajudá-lo a entendê-los.
Alex
6
isso realmente não se encaixa neste tópico
user151496
24

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.

Richtelford
fonte
Seu esquecimento dotransform-style: preserve-3d
Jack Giffin
Não é essencial para transformações 2D aninhadas - depende do resultado desejado. A origem da transformação provavelmente será útil.
richtelford
21

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

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

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.

schellmax
fonte
1

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

Alireza
fonte
0

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>

Vinkal
fonte