¿Cómo aplicar múltiples transformaciones en CSS?

Question

Usando CSS, ¿cómo puedo aplicar más de un transform?

Ejemplo: A continuación, solo se aplica la traducción, no la rotación.

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

Answer 1

Tienes que ponerlos en una línea como la siguiente:

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

Cuando tenga varias directivas transformar, no se aplicarán hasta el último. Es como cualquier otro atributo CSS.

Answer 2

Se puede aplicar más de una transformada de esta manera:

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

Answer 3

Por ejemplo

-webkit-transform: rotateX(-36.09deg) rotateY(-52.71deg) scaleX(1.3) scaleY(1.3) translateY(31px) ; 
transform: rotateX(-36.09deg) rotateY(-52.71deg) scaleX(1.3) scaleY(1.3) translateY(31px) ; 
-webkit-transform-origin: 50% 50% 0; 
transform-origin: 50% 50% 0; 

estoy usando enjoycss herramienta

http://enjoycss.com/5C#transform

que genera código CSS para requerido parámetros de transformación usando GUI para generar el tran código sfrom;)

Answer 4

Estoy agregando que esta respuesta no porque es probable que sea útil, pero sólo porque es verdad.

Además de utilizar las respuestas existentes explicando cómo hacer más de una traducción encadenándolos, también puede construct the 4x4 matrix yourself

me agarró la siguiente imagen de some random site I found while googling que muestra las matrices de rotación:

Rotación alrededor x eje:
Rotación alrededor del eje y:
Rotación alrededor del eje Z:

no pude encontrar un buen ejemplo de la traducción, por lo que suponiendo que recuerdo/entenderlo bien, la traducción:

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

Ver más en el Wikipedia article on transformation, así como the Pragamatic CSS3 tutorial que explica bastante bien. Otra guía que encontré que explica las matrices de rotación arbitrarias es Egon Rath's notes on matrices

La multiplicación de matrices funciona entre estas matrices 4x4, por supuesto, para realizar una rotación seguida de una traducción, se crea la matriz de rotación adecuada y se multiplica por la matriz de traducción.

Esto puede darle un poco más de libertad para hacerlo bien, y también hará que sea prácticamente imposible que alguien entienda lo que está haciendo, incluyéndolo en cinco minutos.

Pero, ya sabes, funciona.

Editar: Me acabo de dar cuenta de que eché de menos mencionar 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.

Answer 5

Una forma sencilla de aplicar múltiples transformar este es

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

pero también no hay que olvidar que es necesario añadir el prefijo para permitir que funcione en todos los navegadores, ya que algunos navegadores como Safari, IE no soporta TRANFORM propiedad sin prefijo.

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

Answer 6

También puede aplicar varias transformaciones mediante una capa adicional de marcado ej .:

<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 ser muy útil cuando la animación de elementos con las transformaciones utilizando Javascript.