CSS en 3D ( HTML 5 )

CSS 3 nos permite efectuar modificaciones a un elemento que utilicen las tres dimensiones del espacio.

Tabla de contenido

• · Propiedades
• · Funciones de transformación
• · Movimiento
• · Escalado
• · Rotación
• · Inclinación
• · Perspectiva
• · Animación

Propiedades

Primero vamos a enumerar y explicar las propiedades CSS que existen para estas tareas:

transform - Aplica una función de transformación espacial a un objeto

000 001 002 003 004 005

<style> #elementoInclinado {     /* Inclinamos 20 grados */     transform: skew(20deg, 0deg); }</style>  Maximizar   Seleccionar   CSS,XML

transform-origin - Indica el origen de la transformación
transform-style - Indica cómo se muestra el elemento en el espacio, valores posibles: flat y preserve-3d
perspective - Aplica la función de transformación perspective

000 001 002 003 004 005 006 007 008

<style> div {    perspective: 500; } /* Equivale a */ div {    transform: perspective(500) }</style>  Maximizar   Seleccionar   CSS,XML

Funciones de transformación

Las funciones de transformación las usamos cómo valor de la propiedad transform y realizan la modificación espacial del objeto.

Movimiento

Para hacer un movimiento a un objeto ( translate ), podemos hacerlo con cualquiera de las siguientes funciones:

translate - Hace un movimiento en el espacio 2D tiene parámetro X y de forma opcional Y
translate3d - Hace un movimiento en el espacio 2D tiene parámetros X, Y y Z
translateX
translateY
translateZ - Hace un movimiento en el espacio 2D y en su eje, que es su único parámetro

000 001 002 003 004 005 006 007 008 009

<style> #elementoSubido {     /* Movemos 100px hacia las Y positivas ( arriva ) */     transform: translateY(100px); } #elementoBajado {     /* Movemos 100px hacia las Y negativas ( abajo ) */     transform: translateY(-100px); }</style>  Maximizar   Seleccionar   CSS,XML

Escalado

Para hacer un escalado a un objeto disponemos de las mismas funciones que para el movimiento pero cambiando translate por escale, por ejemplo veamos cómo escalamos un objeto tridimensionalmente:

000 001 002 003 004 005

<style> #Escalado {     /* Multiplicamos por 2 las dimensiones del objeto */     transform: scale3d (2,2,2); }</style>  Maximizar   Seleccionar   CSS,XML

Rotación

Para hacer una rotación disponemos de las mismas funciones que para el movimiento pero cambiando translate por rotate, por ejemplo veamos cómo girar un objeto sobre el eje Y:

000 001 002 003 004 005

<style> #Girado {     /* Giramos 30 grados a la derecha */     transform: rotateY (30deg); }</style>  Maximizar   Seleccionar   CSS,XML

Inclinación

Para inclinar un objeto tenemos screw, screwX y screwY:

000 001 002 003 004 005

<style> #inclinado {     /* Inclinamos 30 grados a la derecha */     transform: screwY (30deg); }</style>  Maximizar   Seleccionar   CSS,XML

Perspectiva

Determina la intensidad de los efectos 3D de los elementos contenidos en el elemento actual, perspective además de una función también es una propiedad:

000 001 002 003 004

<style> div {    perspective: 500; }</style>  Maximizar   Seleccionar   CSS,XML

Contra mayor es la perspectiva ( en píxels ), menor es la intensidad de los efectos aplicados.

Animación

Para hacer animaciones, añadiremos la propiedad transition que veremos en detalle en próximos capítulos:

000 001 002 003 004 005

<style> a:hover { /* Al pasar el cursor por un enlace */    transform: rotate(-90deg); /* Rotar -90 º */    transition: transform 3s; /* Tardar 3 segundos en hacer el rotado */ }</style>  Maximizar   Seleccionar   CSS,XML