Tecnología de animación CSS3 que necesitas saber (2)

Autor：Eve Cole Fecha de actualización：2025-01-15 16:16:56

traducir

El nombre "traducir" es un poco engañoso. En realidad, es un método para posicionar elementos utilizando valores de coordenadas X e Y.

El siguiente es el contenido citado:

#nav{
/* Esto moverá el elemento de navegación 10 píxeles hacia la izquierda y 20 píxeles hacia abajo */
-moz-transform: traducir (10px, 20px);
-webkit-transform: traducir (10px, 20px);
}

Soporte del navegador

Actualmente, el atributo de traducción solo es compatible con Firefox, Safari y Chrome, y debe utilizar los prefijos privados del navegador -moz- y -webkit-.

Sesgar

Skew también es una función de transformación útil, que puede inclinar un objeto en un cierto ángulo alrededor de los ejes xey. Esto es diferente de la rotación de rotar, que solo gira sin cambiar la forma del elemento. La inclinación cambia la forma de un elemento. Skew tiene dos parámetros, que representan la inclinación de los ejes xey respectivamente.

El siguiente es el contenido citado:

#nav{
/* Esto moverá el elemento de navegación 10 píxeles hacia la izquierda y 20 píxeles hacia abajo */
-moz-transform: sesgar (30 grados, -10 grados);
-webkit-transform: sesgar (30 grados, -10 grados);
}

Soporte del navegador

Actualmente, el atributo Skew solo es compatible con Firefox, Safari y Chrome, y utiliza los prefijos privados del navegador -moz- y -webkit-.

Matriz

Sí, Matrix es una matriz. Matrix es algo muy básico en matemáticas avanzadas y, de hecho, es una función muy avanzada en CSS 3. CSS 3 introduce la función de matriz, que puede realizar los diversos efectos anteriores de manera muy flexible. Tiene 6 parámetros (a, b, c, d, e, f), que en realidad es una matriz de 3*3 a través de la cual los parámetros antiguos se convierten en valores nuevos:

| 0 0 1 |

Si está interesado en estudiar en profundidad, puede echar un vistazo aquí http://www.w3.org/TR/SVG/coords.html#TransformMatrixDefined . Este es un documento para SVG, pero el principio de transformación matricial es universal. .

Veamos un ejemplo:

El siguiente es el contenido citado:

#nav{
/* El elemento de navegación se inclinará como la esquina superior derecha */
-transformación moz: matriz (1, -0,2, 0, 1, 0, 0);
-webkit-transformación: matriz (1, -0,2, 0, 1, 0, 0);
}

Soporte del navegador

La buena noticia es que IE admite filtros matriciales. Aunque no admite la mayoría de las funciones de transformación CSS3, básicamente puedes lograr el mismo efecto con este filtro. Sin embargo, primero debes comprender las operaciones matriciales. Tanto webkit como Firefox (3.5+) admiten esta función.

deformación de la cadena

Las transformaciones suelen ser independientes, pero si desea utilizar varias transformaciones al mismo tiempo, el código se puede integrar rápidamente, especialmente mediante extensiones privadas. Por suerte, tenemos algunas abreviaturas integradas:

El siguiente es el contenido citado:

#nav{
-moz-transform: traducir(10, 25);
-webkit-transformación: traducir(10, 25);
-moz-transform: rotar (90 grados);
-webkit-transform: rotar (90 grados);
-transformación moz: escala(2, 1);
-webkit-transformación: escala (2, 1);
}

Estas transformaciones se pueden encadenar para hacer que su código sea más eficiente:

El siguiente es el contenido citado:

navegación {
-moz-transform: traducir(10, 25) rotar(90 grados) escala(2, 1);
-webkit-transform: traducir(10, 25) rotar(90 grados) escala(2, 1);
}

El verdadero poder de estas propiedades se combina entre sí. Puede mover, rotar, escalar y controlar cualquier elemento en línea y a nivel de bloque sin usar JavaScript. Una vez que el soporte para estas propiedades se generalice, podremos crear interfaces y aplicaciones más ricas y ligeras.

origen-transformación

transform-origin no es una subfunción de transform, pero está muy estrechamente relacionado con transform. Se puede utilizar para especificar el punto de inicio de la transformación. Por ejemplo, el punto de inicio predeterminado de la transformación de rotación es el medio. Puede establecer el punto de inicio en la esquina superior izquierda o en la esquina inferior izquierda, para que los resultados de. la transformación de rotación puede ser muy diferente.

transform-origin acepta dos parámetros, que pueden ser valores específicos como porcentaje, em, px, etc., o parámetros descriptivos como izquierda, centro, derecha o arriba, medio, abajo, etc. Algunos ejemplos:

El siguiente es el contenido citado:

.class1{-moz-transform-origin: 0 0;
-webkit-transformación-origen: 0 0;
...
}
.class2{-moz-transform-origin:100% 100%;
-webkit-transformación-origen:100% 100%;
...}
.class3{-moz-transform-origin:arriba a la izquierda;
-webkit-transform-origin: arriba a la izquierda;
...}

Compatibilidad del navegador

Actualmente, este atributo solo es compatible con webkit y firefox y requiere agregar su propio prefijo privado.