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

css3 transform + deviceorientation实现图片旋转效果的更多相关文章

  1. css3实现图片旋转效果

    css3实现图片旋转效果 近期实现一个消息提醒(醒目)的需求页面.想到了css3的旋转动画,故使用. =============== 鼠标悬浮时候,图片可以旋转,放大 rotate(360deg) s ...

  2. 【CSS3】 理解CSS3 transform中的Matrix(矩阵)

    理解CSS3 transform中的Matrix(矩阵) by zhangxinxu from http://www.zhangxinxu.com 本文地址:http://www.zhangxinxu ...

  3. CSS3 transform rotate(旋转)锯齿的解决办法

    -moz-transform: rotate(5deg);-webkit-transform: rotate(5deg); 把图片旋转了5度.本以为轻而易举,可遇到了问题.在Fireofx中显示正常, ...

  4. 理解CSS3 transform中的Matrix(矩阵)

    一.哥,我被你吓住了 打架的时候会被块头大的吓住,学习的时候会被奇怪名字吓住(如“拉普拉斯不等式”).这与情感化设计本质一致:界面设计好会让人觉得这个软件好用! 所以,当看到上面“Matrix(矩阵) ...

  5. CSS3 transform对普通元素的N多渲染影响

    一.一入transform深似海 一个普普通通的元素,如果应用了CSS3 transform变换,即便这个transform属性值不会改变其任何表面的变化(如scale(1), translate(0 ...

  6. css3实现非矩形图片效果

    经常在网站上看到有一些非矩形的图片展示.在以前可能我会毫不犹豫的直接放上张处理好的图片.但是这样的话确实有些不太友好.每每需要换图的时候,都要去开图像处理软件也是蛮拼的.自从有了css3的选装,妈妈就 ...

  7. CSS3 实现六边形Div图片展示效果

    原文:CSS3 实现六边形Div图片展示效果 效果图: 实现原理: 这个效果的主要css样式有: 1.>transform: rotate(120deg); 图片旋转 2.>overflo ...

  8. 理解CSS3 transform中的Matrix(矩阵)——张鑫旭

    by zhangxinxu from http://www.zhangxinxu.com本文地址:http://www.zhangxinxu.com/wordpress/?p=2427 一.哥,我被你 ...

  9. CSS3 Transform变形理解与应用

    CSS3 Transform变形理解与应用 Transform:对元素进行变形:Transition:对元素某个属性或多个属性的变化,进行控制(时间等),类似flash的补间动画.但只有两个关键贞.开 ...

随机推荐

  1. 亲測Mysql表结构为InnoDB类型从ibd文件恢复数据

    客户的机器系统异常关机,重新启动后mysql数据库不能正常启动,重装系统后发现数据库文件损坏,悲催的是客户数据库没有进行及时备份,仅仅能想办法从数据库文件其中恢复,查找资料,试验各种方法,确认以下步骤 ...

  2. windows下的两个等待函数

    windows下的两个等待技术 第一种: Win32  Sleep()函数      这个函数要求操作系统中止线程动作.直到读过某个指定的时间之后才恢复.能在某个线程结束时(而不是某段时间结束时)被调 ...

  3. GCC编译动态和静态链接库例子

    我们通常把一些公用函数制作成函数库,供其它程序使用.函数库分为静态库和动态库两种.静态库在程序编译时会被连接到目标代码中,程序运行时将不再需要该静态库.动态库在程序编译时并不会被连接到目标代码中,而是 ...

  4. 安装BIRT Chart Engine的时候,提示Cannot complete the install because one or more required items could not be

    http://wiki.eclipse.org/BIRT_Update_Site_URL 每个eclipse对应的BIRT版本 help-install new software: http://do ...

  5. 生成 hibernate 映射文件和实体类

    创建web工程,使用Hibernate的时候,在工程里一个一个创建实体类太麻烦,浪费时间,现在教大家如何用MyEclipse自动生成Hibernate映射文件及实体类 方法/步骤   创建数据库,创建 ...

  6. FOUNDATION OF ASYNCHRONOUS PROGRAMMING

    The async and await keywords are just a compiler feature. The compiler creates code by using the Tas ...

  7. Day1 BFS算法的学习和训练

    ​ 因为自己的原因,之前没有坚持做算法的相应学习,总是觉得太难就半途而废,真的算是一个遗憾了,所以现在开始,定一个30天入门学习算法计划. ​ 我是根据<算法图解>的顺序进行安排的,自己对 ...

  8. 深入理解JMM(Java内存模型) --(一)

    并发编程模型的分类 在并发编程中,我们需要处理两个关键问题:线程之间如何通信及线程之间如何同步(这里的线程是指并发执行的活动实体).通信是指线程之间以何种机制来交换信息.在命令式编程中,线程之间的通信 ...

  9. SimpliciTI协议栈

    SimpliciTI组网过程介绍 1.SimpliciTI支持点对点和星形的网络拓扑结构.   下面介绍以AP为中心的SimpliciTI网路协议的星形拓扑结构通信过程 1)当ED节点上电之后就扫描信 ...

  10. MySQL-Tool:Navicate 安装

    ylbtech-MySQL-Tool:Navicate 安装 1.返回顶部 1. 2. 3. 4. 5. 6. 7. 8. 9. 10. 2. 激活返回顶部 1. 2. 3. 4. 5. 6. 7. ...