当前位置： 移动技术网 > IT编程>网页制作>CSS > css3 transform + deviceorientation实现图片旋转效果

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

2018年03月23日  | 移动技术网IT编程  | 我要评论

康叶斌,骨髓瘤细胞,奇热电影院

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!!!");
}

 

您可能感兴趣的文章:

如对本文有疑问，请在下面进行留言讨论，广大热心网友会与你互动！！ 点击进行留言回复

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网