3D旋转仿伪3D立体效果,手机端
偶然在书上看到这段代码,感觉很舒服,直街附代码吧,原生JS。手机端旋转效果仿立体效果。
纯JS代码足够了、
var img=document.createElement('img');
img.setAttribute('src','1.png');
function handle(e) {
var alpha = e.alpha, beta = e.beta, gamma = e.gamma;
img.style.webkitTransform = "rotateZ(" + alpha + "deg) rotateX(" + beta + "deg) rotateY(" + gamma + "deg)";
}
document.body.appendChild(img);
window.addEventListener('deviceorientation',handle,false);
有兴趣的童鞋可以试试,比较有趣。
3D旋转仿伪3D立体效果,手机端的更多相关文章
- HTML 5 +CSS3 + 原生js 做(雪花全屏飘落 + 3d旋转图)
原文:HTML 5 +CSS3 + 原生js 做(雪花全屏飘落 + 3d旋转图) 3d旋转图:主要用css3中transform属性中的rotate,translate;以及用来做舞台效果的 pers ...
- WPF 图片浏览 伪3D效果
原文:WPF 图片浏览 伪3D效果 首先上效果图: 因项目要求,需要把图片以"好看"."炫"的效果展示出来,特地研究了一下WPF关于3D方面的制作,奈何最终成果 ...
- HTML5 Canvas 高仿逼真 3D 布料图案效果
HTML5 规范引进了很多新特性,其中最令人期待的之一就是 Canvas 元素,HTML5 Canvas 提供了通过 JavaScript 绘制图形的方法,非常强大.下面给大家分享一个 HTML5 C ...
- Android 滑动效果进阶篇(五)—— 3D旋转
前面介绍了利用Android自带的控件,进行滑动翻页制作效果,现在我们通过代码实现一些滑动翻页的动画效果. Animation实现动画有两个方式:帧动画(frame-by-frame animatio ...
- JQ 实现轮播图(3D旋转图片轮播效果)
轮播图效果如下: 代码: <!DOCTYPE html> <html xmlns="/www.w3.org/1999/xhtml"> <head> ...
- 32.qt quick-模仿QQ登录界面实现3D旋转(Rotation、Flipable)
要想模仿QQ登录界面的3D旋转,我们需要学习Rotation和Flipable.由于没找到QQ的资源图,所以我们以两个图片为例模仿QQ的3D旋转,如下图所示: 最终效果如下所示: 1.Rotation ...
- 37.qt quick- 高仿微信实现局域网聊天V3版本(添加登录界面、UDP校验登录、皮肤更换、3D旋转)
1.版本介绍(已上传至群里) 版本说明: 添加登录界面. UDP校验登录. 皮肤更换. 3D旋转(主界面和登录界面之间切换) . 效果图如下所示: 如果效果图加载失败,可以去哔哩哔哩 https:// ...
- 【CSS3进阶】酷炫的3D旋转透视
之前学习 react+webpack ,偶然路过 webpack 官网 ,看到顶部的 LOGO ,就很感兴趣. 最近觉得自己 CSS3 过于薄弱,想着深入学习一番,遂以这个 LOGO 为切入口,好好研 ...
- CSS3——3D旋转图(跑马灯效果图)
CSS3新增了很多新的属性,可以用很少的代码实现炫酷的动画效果,但由于兼容性各浏览器的能力存在不足,有特别需求的网站就呵呵啦.H5C3已是大势所趋了,之前看过一个新闻,Chrome将在年底全面转向H5 ...
随机推荐
- asterisk ss7 ${CALLERID(rdnis)}变量为空问题
asterisk 1.8.16+chan_ss7 version 2.1.1b ${CALLERID(rdnis)}变量取不到信息问题,解决 编辑 funcs/func_callerid.c chan ...
- visualVM远程监控JVM
对于完全没用使用过visualVM的初学者 环境:Windows PC上使用visualVM监控远端JVM @@@@jstatd方式连接@@@@ 1.Windows安装jdk,$JAVA_HOME/b ...
- WCF的用户名+密码认证方式(转)
概述 今天在做Master Data Service(后面简称MDS)项目时需要通过WCF来使用MDS的API,从而对MDS的数据进行操作.在这个过程中,遇到了一个棘手的问题,就是在客户端调用Web ...
- 洛谷 1131 [ZJOI2007]时态同步——树形dp
题目:https://www.luogu.org/problemnew/show/P1131 因为越高,调节一个影响到的越多,所以底下只要把子树间的差异消除了就行了,与其他部分的差异由更高的边调节. ...
- hdu 1521 排列组合 —— 指数型生成函数
题目:http://acm.hdu.edu.cn/showproblem.php?pid=1521 标准的指数型生成函数: WA了好几遍,原来是多组数据啊囧: 注意精度,直接强制转换(int)是舍去小 ...
- 你所不知道的html5与html中的那些事(四)——文本标签
文章简介: 关于html5相信大家早已经耳熟能详,但是他真正的意义在具体的开发中会有什么作用呢?相对于html,他又有怎样的新的定义与新理念在里面呢?为什么一些专家认为html5完全完成后 ...
- hadoop--谷歌三大论文
学习大数据必读的三个论文: http://pan.baidu.com/s/1c0FA69U 在我的网盘,大家可以去下载 Google File System中文版 Google Bigtable中文版 ...
- tomcat 开机自启方法
1.把下面的代码保存为tomcat文件,并让它成为可执行文件 chmod 755 tomcat. #!/bin/bash # # /etc/rc.d/init.d/tomcat # init scri ...
- why std::stack has separate top() and pop()
SGI explanation: http://www.sgi.com/tech/stl/stack.html One might wonder why pop() returns void, ins ...
- 如何更改linux文件的拥有者及用户…
本文整理自: http://blog.163.com/yanenshun@126/blog/static/128388169201203011157308/ http://ydlmlh.iteye.c ...