La implementación de
transformaciones CSS puede cambiar, rotar, inclinar, aplastar y estirar los
elementos. Los diseñadores web irán más allá de sus contrapartes de
visualización con transformaciones CSS 3D y entrarán en un nuevo campo de
diseño gráfico. Los desarrolladores front-end mejorarán sus diseños con
transformaciones CSS 3D al crear una nueva dimensión para los sitios web
convencionales.
El elemento transformado no impacta en los elementos correspondientes pero
puede superponerse de la misma manera que los elementos que están completamente
posicionados. Aun así, el elemento transformado aún requiere más espacio
en su ubicación predeterminada en el diseño. Podemos comenzar a mover
elementos al eje x, eje y y eje z usando transformaciones 3d.
Nota : La propiedad transform de CSS3 usa las
funciones de transform para controlar el sistema de coordenadas usado por un
elemento para agregar el efecto de transformación.
Funciones de las transformaciones 3D
CSS
Las siguientes son las funciones de transformación 3D en CSS:
- translate3d(x,y,z): proporciona la traducción 3D y mueve el elemento junto con los ejes X, Y y Z.
- translateX(x): Especifica la traducción 3D moviendo el elemento junto con el eje X.
- translateY(y): especifica la traducción 3D moviendo el elemento junto con el eje Y.
- translateZ(z): Especifica la traducción 3D moviendo el elemento junto con el eje Z.
- scale3d(): proporciona la traducción de escala 3D y escala el elemento junto con los ejes X, Y y Z.
- rotate3D(): proporciona la rotación 3D con el ángulo especificado junto con la dirección X, Y y Z.
- matrix3D(): Define la matriz de transformación 4*4 de 16 valores.
- perspectiva(n): Describe una visión de perspectiva para un elemento transformado en 3D. Además, el elemento aparecerá más alejado del espectador a medida que aumente el valor de dicha función.
En
el espacio de nombre del proyecto damos click derecho y seleccionamos Add à New Items
En
la siguiente ventana seleccionamos la Opción “Pagina HTML” y colocamos como
nombre del archivo “3DTransformations.html”, para luego presionar el botón Add.
En el
código correspondiente
Procedemos a
establecer la página de inicio
Y verificamos página web:
