¿Cómo aplicar múltiples transformaciones en CSS?
Usando CSS, ¿cómo puedo aplicar más de uno transform?
Ejemplo: en lo siguiente, solo se aplica la traslación, no la rotación.
li:nth-child(2) {
transform: rotate(15deg);
transform: translate(-20px,0px);
}
Tienes que ponerlos en una línea así:
li:nth-child(2) {
transform: rotate(15deg) translate(-20px,0px);
}
Cuando tenga varias directivas de transformación, solo se aplicará la última. Es como cualquier otra regla CSS.
Tenga en cuenta que se aplican varias directivas de transformación de una línea de derecha a izquierda .
Esto transform: scale(1,1.5) rotate(90deg);
y:transform: rotate(90deg) scale(1,1.5);
no producirá el mismo 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>
Estoy agregando esta respuesta no porque sea útil, sino simplemente porque es cierta.
Además de utilizar las respuestas existentes que explican cómo hacer más de una traducción encadenándolas, también puedes construir tú mismo la matriz 4x4.
Tomé la siguiente imagen de un sitio aleatorio que encontré mientras buscaba en Google y que muestra matrices rotacionales:
Rotación alrededor del eje x: 
Rotación alrededor del eje y: 
Rotación alrededor del eje z:
No pude encontrar un buen ejemplo de traducción, así que suponiendo que lo recuerde/entienda bien, traducción:
[1 0 0 0]
[0 1 0 0]
[0 0 1 0]
[x y z 1]
Vea más en el artículo de Wikipedia sobre transformación , así como en el tutorial Pragamatic CSS3 que lo explica bastante bien. Otra guía que encontré que explica las matrices de rotación arbitraria son las notas de Egon Rath sobre matrices.
Por supuesto, la multiplicación de matrices funciona entre estas matrices de 4x4, por lo que para realizar una rotación seguida de una traslación, se crea la matriz de rotación adecuada y se multiplica por la matriz de traslación.
Esto puede darle un poco más de libertad para hacerlo bien y también hará que sea prácticamente imposible que cualquiera entienda lo que está haciendo, incluido usted, en cinco minutos.
Pero ya sabes, funciona.
Editar: Me acabo de dar cuenta de que omití mencionar probablemente el uso más importante y práctico de esto, que es crear incrementalmente transformaciones 3D complejas a través de JavaScript, donde las cosas tendrán un poco más de sentido.
También puede aplicar múltiples transformaciones usando una capa adicional de marcado, por ejemplo:
<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>
Esto puede resultar realmente útil al animar elementos con transformaciones utilizando Javascript.
Puedes aplicar más de una transformación como esta:
li:nth-of-type(2){
transform : translate(-20px, 0px) rotate(15deg);
}
