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

translate css animation

Question

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

Ejemplo: En lo siguiente, solo se aplica la traducción, no la rotación.

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

Answer 1

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

Además de usar las respuestas existentes que explican cómo hacer más de una traducción encadenándolas, 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 de rotación:

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, asumiendo que lo recuerdo / 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 la transformación , así como en el tutorial Pragamatic CSS3 que lo explica bastante bien. Otra guía que encontré que explica matrices de rotación arbitrarias son las notas de Egon Rath sobre 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 apropiada y se multiplica por la matriz de traducción.

Esto puede darte 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éndote a ti en cinco minutos.

Pero, ya sabes, funciona.

Edición: Me acabo de dar cuenta de que me olvidé de mencionar el uso más importante y práctico de esto, que consiste en crear transformaciones 3D complejas a través de JavaScript, donde las cosas tendrán un poco más de sentido.

Answer 2

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 la herramienta enjoycss

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

genera código css para los parámetros requeridos de transformación utilizando GUI para generar el código de transferencia;)

Answer 3

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

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

Answer 4

Simplemente comience desde allí que en CSS , si repite 2 valores o más, siempre se aplicará el último, a menos que use !important etiqueta !important , pero al mismo tiempo evite usar la mayor !important posible, por lo que en su caso ese es el problema , entonces la segunda transformación anula la primera en este caso ...

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

No se preocupe , transformar acepta varios 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 la transformación, 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 enlace de abajo para más información:

<< CSS transformar >>

Answer 5

También puede aplicar múltiples transformaciones utilizando una capa adicional de marcado, por ejemplo:

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

Esto puede ser realmente útil cuando se animan elementos con transformaciones usando Javascript.

Answer 6

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 otro atributo de CSS.

Answer 7

Una forma simple de aplicar la transformación múltiple es esta

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

Pero tampoco olvide que debe agregar el prefijo para que funcione en todos los navegadores, ya que algunos navegadores como safari, IE no admite la propiedad de transformación 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);
}