欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

css3 transform + deviceorientation实现图片旋转效果

程序员文章站 2022-04-12 20:37:14
1. 陀螺仪deviceorientation的使用,参考《关于陀螺仪deviceorientation》https://segmentfault.com/a/1190000007183883 。 2. transform各属性的具体使用,参考《深入理解CSS变形transform(3d)》http ......

1. 陀螺仪deviceorientation的使用,参考《关于陀螺仪deviceorientation》https://segmentfault.com/a/1190000007183883 。

2. transform各属性的具体使用,参考《深入理解CSS变形transform(3d)》https://www.cnblogs.com/xiaohuochai/p/5351477.html 。

3. 代码实现在规定Safari横屏的前提下,图片相对观察点旋转的效果。

var x = 0,y = 0,rotateRes = ""; //横屏时X轴与gamma对应,Y轴与beta对应,
var oriB = 0, oriG = window.orientation>0 ? -45 : 45; //横屏时orientation=90/-90,根据方向设定原始original gamma
var lastB = 0 , lastG = oriG; //上一次记录的beta[-180,180)/gamma[-90,90)
var curB = 0, curG = oriG;//当前的current beta/gamma

if (window.DeviceOrientationEvent) {  //判断当前设备是否支持事件 
  window.addEventListener("deviceorientation", orientationHandler, false);  
  function orientationHandler(event) {    
    curG = Math.round(event.gamma);   
    curB = Math.round(event.beta); 
    if(Math.abs(curB-oriB)<60) {  //只在允许的范围内进行旋转
      if(Math.abs(curG-oriG)<60 && Math.abs(curG-lastG) < 100 ) { //与初始平面不超过60度,且不过分界点才旋转
        x += curG-lastG;  //若希望图片反向旋转,可改为 x -= ...
        lastG = curG;  
      }
    }
    if(Math.abs(curB-oriB)<60 && Math.abs(curB-lastB) < 200 ) { 
      y += curB-lastB; 
      lastB = curB;  
  }

    rotateRes = "perspective(1200px) rotateX(" + x +"deg) rotateY("+ y +"deg)"; //perspective为视距,即人眼到屏幕的距离   
    $("#rotate-image").css({transform:rotateRes,'-webkit-transform':rotateRes});
  }  
}
else {
  console.log("对不起,您的设备还不支持Device Orientation!!!");
}