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;
})); |
$(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); |
// 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