transform dota de características 2D y 3D a todos aquellos elementos que queramos para embellecer el diseño de nuestra web.

Es una característica que va acompañada con las transformaciones CSS.

Te permite cambiar la posición de los elementos transformados. Si esta transformación está en 2d podrás modificar el ejeX y ejeY, si fuera 3d también el ejeZ.

Los datos los podemos introducir en % o por posiciones como top,right,bottom,left,center.

Cuando un elemento está definido por una transformación y queramos que los hijos estén influenciados por la transformación 3d, usaremos preserve-3d. Si no queremos que los elementos hijo no estén influenciados por esta transformación 3d usaremos flat.

Por defecto el valor está en flat.

Te permite definir la forma de ver un elemento por su perspectiva.

El dato a introducir es un valor numérico indicando la unidad de medida que se utiliza em,px,etc.

Al igual que sucedía con transform-origin, te permite definir el origen de la perspectiva antes de empezar a hacer una tranformación 3D.

Cuando se realiza una transformacion de rotate, el backface es la espalda del elemento que se está girando.

Hay dos opciones:

• visible
• hidden

El valor por defecto es visible.

scale(x,y)

Transforma a un elemento a una escala que nosotros le indiquemos.

Son valores numéricos.

Caracteres transform:

scaleX(x)

Transforma a un elemento a una escala que nosotros le indiquemos, en sentido de la coordenada x.

Son valores numéricos.

scaleY(y)

Transforma a un elemento a una escala que nosotros le indiquemos, en sentido de la coordenada x.

Son valores numéricos.

scaleZ(z)

Transforma a un elemento a una escala que nosotros le indiquemos, en sentido de la coordenada z.

Son valores numéricos.

scale3d(x,y,z)

Transforma a un elemento a una escala que nosotros le indiquemos, en sentido de la coordenada x,y,z.

Son valores numéricos.

skew(x,y)

Indica la oblicuidad que le queramos dar a un elemento.

Se expresan los datos en grados (deg), pondremos el dato sin separación.

Caracteres transform:

skewX(deg)

Indica la oblicuidad que le queramos dar a un elemento solo respecto el eje x.

Se expresan los datos en grados (deg), pondremos el dato sin separación.

skewY(deg)

Indica la oblicuidad que le queramos dar a un elemento solo respecto el eje y.

Se expresan los datos en grados (deg), pondremos el dato sin separación.

translate(x,y)

Produce una translación de un elemento.

El movimiento se realiza respecto el eje x e y.

Son valores númericos que tendremos que indicar si unidad de medición px,em,etc

Caracteres transform:

translateX(x)

Produce una translación de un elemento.

El movimiento se realiza respecto el eje x.

Son valores númericos que tendremos que indicar si unidad de medición px,em,etc

translateZ(z)

Produce una translación de un elemento.

El movimiento se realiza respecto el eje z.

Son valores númericos que tendremos que indicar si unidad de medición px,em,etc

translate3d(x,y,z)

Produce una translación de un elemento.

El movimiento se realiza respecto los ejes x,y,z.

Son valores númericos que tendremos que indicar si unidad de medición px,em,etc

rotate(angulo)

rotación 2D de un elemento a un punto concreto, se expresa los datos en deg, puede ser valores positivos o negativos.

El valor de los grados se escribirá sin separación entre deg

Caracteres transform:

rotateX(angulo)

rotación 3D sobre el eje x

rotateY(angulo)

rotación 3D sobre el eje y

rotateZ(angulo)

rotación 3D sobre el eje z

rotate3d(x,y,z,angulo)

rotación 3D sobre el eje de coordenadas y angulo