JS – Transformaciones 3D con CSS3

Publicado por Iván Gajate el 22 de abril de 2013 en css, Desarrollo Web, JavaScript

Estoy trasteando un poco y las transformaciones 3D que permiten las CSS3 y jugando un poco con la posición del cursor.

He utilizado este plugin de jQuery de Rico Sta. Cruz que facilita las transformaciones 3D

Básicamente capturo la posición del ratón cada vez que se mueve y hago el cálculo del ángulo.

 

$(document).bind("mousemove", (function(e){
	mouseX = e.pageX;
	mouseY = e.pageY;
}));

Y en iPad simulo la posición del cursor con la inclinación del dispositivo. Sorprendentemente va muy fluido!! 🙂

 
// En iPad la rotacion la determina la inclinacion del dispositivo
window.addEventListener("deviceorientation", function(e) {
	mouseX = $(document).width()*0.5 + e.beta*10;
	mouseY = $(document).height()*0.5 - e.gamma*5;
}, true);

Descargar el ejemplo completo

 

Un comentario para “JS – Transformaciones 3D con CSS3”

  1. En el ipad va de coña 🙂