transform-function

El tipo de dato CSS <transform-function> denota una funci贸n por aplicar a la representaci贸n de un elemento para modificarlo. Generalmente, dicha transformaci贸n puede ser expresada por matrices, y la imagen resultante puede ser determinada usando multiplicaci贸n de matrices en cada punto.

Coordenadas para graficos 2D

Existen varios modelos de coordenadas utilizados para describir la transformaci贸n. Las m谩s habituales son el sistema de coordenadas cartesiano y las coordenadas homog茅neas.

Coordenadas Cartesianas

En las Cordenadas cartesianas, cada punto del espacio Euclidiano es descrito usando dos valores, la  abscisa y la ordenada. El origen, el (0, 0) es la esquina superior izquierda del elemento. A diferencia de la convenci贸n geom茅trica habitual, y como la mayor铆a de los casos en los gr谩ficos por computadora, el eje y (ordenada) va hacia abajo. Cada punto se describe matem谩ticamente utilizando la notaci贸n vectorial (x, y).

Cada funci贸n lineal es descrita usando una matriz 2x2 de la siguiente manera:

ac bd

Aplicar la transformaci贸n consiste en hacer, por cada punto, la multiplicaci贸n de matrices entre ambos:

.

Es posible aplicar varias transformaciones en una fila:

.

Con esta notaci贸n, es posible describir, y por lo tanto componer, las transformaciones m谩s comunes: rotaci贸n, escala o transvecci贸n. De hecho, todas las transformaciones que son funciones lineales pueden ser descritas. Una transformaci贸n mayor no es lineal y por lo tanto debe ser tratada de forma especial cuando se usa esta notaci贸n: traslaci贸n. El vector de traslaci贸n (tx, ty) debe ser expresado de forma separada, como dos par谩metros adicionales.

Las coordenadas homog茅neas de M枚bius en geometr铆a proyectiva llevan a transformaciones matriciales de 3x3 que, aunque son m谩s complejas e inusuales para quienes no son especialistas, no sufren de la limitaci贸n de traslaci贸n, puesto que puede ser expresada como funciones lineales en esta 谩lgebra, quitando la necesidad de casos especiales.

Funciones que definen transformaciones

Existen varias funciones disponibles para describir transformaciones en CSS. Cada una aplica una operaci贸n geom茅trica, en 2D o 3D:

matrix()
La funci贸n matrix() especifica una matriz de transformaci贸n 2D homog茅nea , comprendida por los seis valores especificados. Los valores constantes de dichas matrices son impl铆citos, y no son enviados como par谩metros; los otros par谩metros son descritos en orden de columna principal.
matrix(a, b, c, d, tx, ty) es la forma reducida de matrix3d(a, b, 0, 0, c, d, 0, 0, 0, 0, 1, 0, tx, ty, 0, 1).
matrix3d()
La funci贸n matrix3d() describe una transformaci贸n 3D como una matriz 4x4 homog茅nea. Los 16 par谩metros son descritos en orden de columna principal.
perspective()
La funci贸n perspective() define la distancia entre el plano z=0 y el usuario, para dar cierta perspectiva al elemento posicionado en tercera dimensi贸n. Cada elemento 3D con z>0 se vuelve m谩s grande; cada elemento 3D con z<0 se vuelve m谩s peque帽o. La magnitud del efecto se determina por el valor de esta propiedad.
rotate()
La funci贸n rotate() define una transformaci贸n que mueve al elemento al rededor de un punto fijo (especificado por la propiedad transform-origin) sin deformarlo. La cantidad de movimiento es definida por el 谩ngulo especificado; si es positivo, el movimiento ser谩 en sentido de las manecillas del reloj, y si es negativo, ser谩 en sentido opuesto. Una rotaci贸n de 180掳 es llamada reflexi贸n de punto.
rotate3d()
La funci贸n rotate3d() describe una transformaci贸n que mueve al elemento al rededor de un eje fijo sin deformarlo. La cantidad de movimiento es definido por el 谩ngulo especificado; si es positivo, el movimiento ser谩 en sentido de las manecillas del reloj, y si es negativo, ser谩 en sentido opuesto. Al contrario de las rotaciones en el plano, la composici贸n de las rotaciones 3D es generalmente no conmutativa; esto significa que el orden en el que se aplican las rotaciones es crucial.
rotatex()
La funci贸n rotateX() describe una transformaci贸n que mueve el elemento al rededor de su eje de las abscisas sin deformarlo. La cantidad de movimiento es definida por el 谩ngulo especificado; si es positivo, el movimiento ser谩 en sentido de las manecillas del reloj, y si es negativo, ser谩 en sentido opuesto. El eje de rotaci贸n pasa por el origen, definido por la propiedad cssxref("transform-origin") }}.
rotateX(a) es la forma reducida de rotate3D(1, 0, 0, a).
rotatey()
La funci贸n rotateY() describe una transformaci贸n que mueve el elemento al rededor de su eje de las ordenadas sin deformarlo. La cantidad de movimiento es definida por el 谩ngulo especificado; si es positivo, el movimiento ser谩 en sentido de las manecillas del reloj, y si es negativo, ser谩 en sentido opuesto. El eje de rotaci贸n pasa por el origen, definido por la propiedad transform-origin.
rotateY(a) es la forma reducida de rotate3D(0, 1, 0, a).
rotatez()
La funci贸n rotateZ() describe una transformaci贸n que mueve el elemento al rededor de su eje Z sin deformarlo. La cantidad de movimiento es definida por el 谩ngulo especificado; si es positivo, el movimiento ser谩 en sentido de las manecillas del reloj, y si es negativo, ser谩 en sentido opuesto. El eje de rotaci贸n pasa por el origen, definido por la propiedad transform-origin.
rotateZ(a) es la forma corta de rotate3D(0, 0, 1, a).
scale()
La funci贸n scale() modifica el tama帽o del elemento. Puede aumentar o disminuir su tama帽o, y ya que la cantidad de escalada es definida por un vector, puede hacerlo m谩s hacia una direcci贸n que a otra. Esta transformaci贸n se caracteriza por un vector cuyas coordenadas definen qu茅 tanto se escalar谩 hacia cada direcci贸n. Si ambas coordenadas del vector son iguales, el ajuste es uniforme, o isotr贸pico, y la figura del elemento es conservada. En ese caso, la funci贸n de escalada define una homotecia.
scale3d()
La funci贸n scale3d() modifica el tama帽o de un elemento. Siendo que la cantidad de escalada es definida por un vector, puede cambiar el tama帽o a diferentes dimensiones en diferentes escalas. Esta transformaci贸n se caracteriza por un vector cuyas coordenadas definen qu茅 tanto se escalar谩 hacia cada direcci贸n. Si las tres coordenadas del vector son iguales, el ajuste es uniforme, o isotr贸pico, y la figura del elemento es conservada. En ese caso, la funci贸n de escalada define una homotecia.
scalex()
La funci贸n scaleX() modifica la abscisa de cada punto del elemento con base en un factor constante, excepto si dicho factor es 1, en cuyo caso la funci贸n es la transformaci贸n de identidad. La escalada no es isotr贸pica y los 谩ngulos del elemento no son conservados. scaleX(-1) define una simetr铆a axial con un eje vertical pasando por el origen (seg煤n sea sea especificado en la propiedad transform-origin).
scaleX(sx) es la forma corta de scale(sx, 1) o de scale3d(sx, 1, 1).
scaley()
La funci贸n scaleY() modifica la ordenada de cada punto del elemento con base en un factor constante, excepto si el factor es 1, en cuyo caso la funci贸n es una transformaci贸n de identidad. La escalada no es isotr贸pica y los 谩ngulos del elemento no son conservados. scaleY(-1) define una simetr铆a axial con un eje horizontal pasando por el origen (seg煤n sea especificado en la propiedad transform-origin).
scaleY(sy) es la forma corta de scale(1, sy) o de scale3d(1, sy, 1).
scalez()
La funci贸n scaleZ() modifica la coordenada Z de cada punto del elemento con base en un factor constante, excepto si el factor es 1, en cuyo caso la funci贸n es una transformaci贸n de identidad. La escalada no es isotr贸pica y los 谩ngulos del elemento no son conservados. scaleZ(-1) define una simetr铆a axial al rededor del eje Z, pasando por el origen (seg煤n sea especificado en la propiedad transform-origin).
scaleZ(sz) es la forma corta de scale3d(1, 1, sz).
skew()
La funci贸n skew() es un mapeo de cizallamiento, o transvecci贸n, distorsionando cada punto del elemento con base en cierto 谩ngulo en cada direcci贸n. Esto se hace incrementando cada coordenada por un valor proporcionado para el 谩ngulo especificado y en distancia hacia el origen. Mientras m谩s lejos del origen, mientras m谩s alejado est茅 del punto, mayor ser谩 el valor que se agrega.
skewx()
La funci贸n skewX() es una transvecci贸n horizontal, que distorsiona cada punto de un elemento con base en cierto 谩ngulo en direcci贸n horizontal. Esto se hace incrementando la coordenada abscisa por un valor proporcionado al 谩ngulo especificado, y en distancia hacia el origen. Mientras m谩s lejos est茅 del origen, mientras m谩s lejano est茅 el punto, mayor ser谩 el valor que se agrega.
skewy()
La funci贸n skewY() es una transvecci贸n vertical, que distorsiona cada punto de un elemento con base en cierto 谩ngulo en direcci贸n vertical. Esto se hace incrementando la coordenada ordenada por un valor proporcionado al 谩ngulo especificado, y en distancia hacia el origen. Mientras m谩s lejos est茅 del origen, mientras m谩s lejano est茅 el punto, mayor ser谩 el valor que se agrega.
translate()
La funci贸n translate() mueve la posici贸n del elemento sobre el plano. Esta transformaci贸n se caracteriza por un vector cuyas coordenadas definen qu茅 tanto se mover谩 en cada direcci贸n.
translate3d()
La funci贸n translate3d() mueve la posici贸n del elemento dentro de un espacio tridimensional. Esta transformaci贸n se caracteriza por un vector tridimensional, cuyas coordenadas definen qu茅 tanto se mover谩 en cada direcci贸n.
translatex()
La funci贸n translateX() mueve el elemento horizontalmente sobre el plano. Esta transformaci贸n se caracteriza por un valor <length> que define qu茅 tanto se mover谩 horizontalmente.
translateX(tx) es la forma reducida de translate(tx, 0).
translatey()
La funci贸n translateY() mueve el elemento verticalmente sobre el plano. Esta transformaci贸n se caracteriza por un valor <length> que define qu茅 tanto se mover谩 verticalmente.
translateY(ty) es la forma reducida de translate(0, ty).
translatez()
La funci贸n translateZ() mueve el elemento a trav茅s del eje Z en el espacio tridimensional. Esta transformaci贸n se caracteriza por un valor <length> que define qu茅 tanto se mover谩.
translateZ(tz) es la forma reducida de translate3d(0, 0, tz).

Especificaciones

Especificaci贸n Estado Comentarios
CSS Transforms Level 1
La definici贸n de 'transform' en esta especificaci贸n.
Working Draft Definici贸n inicial

Compatibilidad de navegadores

We're converting our compatibility data into a machine-readable JSON format. This compatibility table still uses the old format, because we haven't yet converted the data it contains. Find out how you can help!

Caracter铆stica Chrome Firefox (Gecko) Internet Explorer Opera Safari
Soporte b谩sico (Yes) 3.5 (1.9.1)[1] 9.0[2] 10.5 3.1
Soporte de 3D 12.0 10.0 (10.0) 10.0 15.0 4.0
Caracter铆stica Android Chrome for Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Soporte b谩sico 2.1 (Yes) (Yes) (Yes) 11.5 3.2
Soporte de 3D 3.0 (Yes) (Yes) (Yes) 22 3.2

[1] Gecko 14.0 quit贸 el soporte experimental para skew(), pero se reintrodujo en Gecko 15.0 por razones de compatibilidad. Siendo no est谩ndar, y probablemente removido en el futuro, no se recomienda usarlo.

Antes de Firefox 16, los valores de traslaci贸n de matrix() y matrix3d() pod铆an ser valores length, adem谩s del valor est谩ndar number.

[2] Internet Explorer 5.5 y superiores soportan la propiedad exclusiva Matrix Filter, la cual puede ser usada para lograr un efecto similar.

Internet Explorer 9.0 e inferiores no tienen soporte para transformaciones 3D. Combinar transformaciones 3D y 2D, como -ms-transform: rotate(10deg) translateZ(0);, har谩 que la propiedad completa sea descartada.