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{ |
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{ |
Soporte del navegador
Actualmente, el atributo Skew solo es compatible con Firefox, Safari y Chrome, y también 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{ |
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 usando 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 utilizando extensiones privadas. Por suerte, tenemos algunas abreviaturas integradas:
El siguiente es el contenido citado: #nav{ |
Estas transformaciones se pueden encadenar para hacer que su código sea más eficiente:
El siguiente es el contenido citado: navegación { |
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; |
Compatibilidad del navegador
Actualmente, este atributo solo es compatible con webkit y Firefox, y requiere agregar su propio prefijo privado.