Crear perspectivas 3D con CSS3

Dentro de las muy interesantes novedades que introduce CSS3 encontramos las opciones para simular efectos 3D.

La propiedad perspective es la que nos abre el camino para crear perspectivas utilizando reglas introducidas por CSS3.

Desde un elemento “root” o “padre” podremos afectar a sus hijos para que tengan una perspectiva que simule un efecto 3D.

Por el momento esta característica es soportada por navegadores Chrome y Safari en sus versiones más modernas, por esta razón será recomendable utilizar el prefijo webkit, si empleamos esta funcionalidad en nuestros proyectos.

¿Un ejemplo? Veamos a continuación como construimos las reglas desde el elemento root:

perspective:250;
-webkit-perspective:250;

También podremos indicar el origen, como vemos a continuación:

perspective-origin: 25% 25%;
-webkit-perspective-origin: 25% 25%;

Trabajando con otras opciones de transformación y rotación, podremos lograr efectos muy interesantes en nuestros diseños.

Más sobre Diseño y desarrollo Web


Acerca de

Autor de los libros: Webmaster Profesional, HTML5: Comprenda el cambio y Apps HTML5 para móviles. Soy especialista en Diseño y Programación Web y Mobile. Colaboré como autor y editor de contenidos para revistas, colecciones y diversos medios digitales. Dicto capacitaciones y consultorías sobre lenguajes y herramientas de desarrollo Web

Un comentario en “Crear perspectivas 3D con CSS3
  1. Anonimo dice:

    No estaria mal un ejemplo

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

*


Cursos y capacitaciones para empresas y profesionales

  • HTML & CSS (maquetado web).
  • CSS3 & Responsive Web Design (diseño web adaptado a móviles y tablets).
  • Flexbox & Grids (técnicas modernas de CSS).
  • LESS & SASS (CSS preprocessors).
  • Responsive E-mail (diseño de emails multidispositivo).
  • Bootstrap (el framework de diseño más utilizado).
  • HTML5 (Nivel inicial y Avanzado + APIs).
  • PhoneGap/Cordova (Aplicaciones para Android e iOS basadas en lenguajes Web).
  • JavaScript (Nivel inicial y avanzado con ECMAScript 6).
  • jQuery (una de las librerías más famosas de JavaScript).
  • Angular (framework para construir aplicaciones Web con JavaScript).
  • PHP & MySQL (programación del lado servidor y bases de datos).

Encontrame en las redes sociales. Contactame.