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


605

Usando CSS, ¿cómo puedo aplicar más de uno 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);        
}

Respuestas:


995

Tienes que ponerlos en una línea como esta:

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

Cuando tiene varias directivas de transformación, solo se aplicará la última. Es como cualquier otra regla CSS.


Tenga en cuenta que las directivas de transformación múltiple de una línea se aplican de derecha a izquierda .

Esto: transform: scale(1,1.5) rotate(90deg);
y:transform: rotate(90deg) scale(1,1.5);

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


55
Traté de separarlos por un "," como se hace con múltiples sombras, pero eso no funcionó. Gracias.
Ben

2
¿Es posible aplicar una transformación antes que otra ... como sesgar antes de rotar? En cuanto a mí, no importa lo que haga, el elemento se gira primero y luego se sesga, lo que resulta en algo que no es lo que quiero.
Muhammad Umer

2
así que no hay manera de dividirlos en varias líneas
aWebDeveloper

2
transformar: traducir (100 píxeles, 100 píxeles) rotar (45 grados) traducir (100 píxeles, 100 píxeles) rotar (45 grados); transformación igual: traducir (200 px, 200 px) rotar (90deg), el último agregará
bigCat

3
@ jave.web, querías decir de derecha a izquierda , ¿correcto? Para transform: scale(1,1.5) rotate(90deg);, la rotación sucedería antes de la escala.
Jargs

43

Estoy agregando esta respuesta no porque sea útil, sino porque es verdad.

Además de usar las respuestas existentes que explican cómo hacer más de una traducción al encadenarlas, también puede construir la matriz 4x4 usted mismo

Tomé la siguiente imagen de un sitio aleatorio que encontré mientras buscaba en Google que muestra matrices rotativas:

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

No pude encontrar un buen ejemplo de traducción, así que suponiendo que lo recuerde / entiendo 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 arbitrarias son las notas de Egon Rath sobre matrices

La multiplicación de matrices funciona entre estas matrices de 4x4, por supuesto, por lo que para realizar una rotación seguida de una traducción, debe hacer la matriz de rotación adecuada y multiplicarla por la matriz de traducción.

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

Pero, ya sabes, funciona.

Editar: Me acabo de dar cuenta de que no mencioné 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.


3
El "sitio aleatorio" en mines.edu es, lamentablemente, ahora un enlace muerto.
Matt Sach

1
Como es el enlace 9elements :(
Matt Sach

1
@MattSach Ok, aparentemente "más tarde hoy" para mí significa "seis meses después", pero al menos el enlace de 9elements está arreglado (alguien más arregló el enlace de sitios aleatorios con Wayback, y seguí su ejemplo).
Jeff

1
También hice esto para ayudarte a entenderlos.
alex

66
esto realmente no encaja en este tema
user151496

24

También puede aplicar múltiples transformaciones utilizando 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 ser realmente útil al animar elementos con transformaciones usando Javascript.


Te estás olvidando eltransform-style: preserve-3d
Jack Giffin

No es esencial para transformaciones 2D anidadas, depende del resultado deseado. El origen de la transformación probablemente será útil.
richtelford

21

Puede aplicar más de una transformación como esta:

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

2

En algún momento en el futuro, podemos escribirlo así:

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

Esto será especialmente útil cuando se aplican clases individuales en un elemento:

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

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

Esta sintaxis se define en la especificación de CSS Transforms Level 2 en curso , pero no puede encontrar nada sobre el soporte actual del navegador que no sea Chrome Chrome. Espero que algún día vuelva y actualice el soporte del navegador aquí;)

Encontró la información en este artículo que quizás desee consultar sobre soluciones alternativas para los navegadores actuales.


1

Simplemente comience desde allí que en CSS , si repite 2 valores o más, siempre se aplica el último, a menos que use la !importantetiqueta, pero al mismo tiempo evite usar !importanttanto como pueda, por lo que en su caso ese es el problema, entonces el segundo transformar anular el primero en este caso ...

Entonces, ¿cómo puedes hacer lo que quieres? ...

No se preocupe , transform acepta múltiples valores al mismo tiempo ... Entonces, este código a continuación funcionará:

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

Si te gusta jugar con transform, ejecuta el iframe de MDN a continuación:

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

Mira el siguiente enlace para más información:

<< Transformación CSS >>


0

Transformar rotar y traducir en una sola línea css: -¿Cómo?

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>

Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.