Respostas:
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>
transform: scale(1,1.5) rotate(90deg);
, a rotação aconteceria antes da balança.
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.
transform-style: preserve-3d
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 !important
tag, mas ao mesmo tempo evite usar !important
o 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:
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>