偶然在书上看到这段代码,感觉很舒服,直街附代码吧,原生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立体效果,手机端的更多相关文章

  1. HTML 5 +CSS3 + 原生js 做(雪花全屏飘落 + 3d旋转图)

    原文:HTML 5 +CSS3 + 原生js 做(雪花全屏飘落 + 3d旋转图) 3d旋转图:主要用css3中transform属性中的rotate,translate;以及用来做舞台效果的 pers ...

  2. WPF 图片浏览 伪3D效果

    原文:WPF 图片浏览 伪3D效果 首先上效果图: 因项目要求,需要把图片以"好看"."炫"的效果展示出来,特地研究了一下WPF关于3D方面的制作,奈何最终成果 ...

  3. HTML5 Canvas 高仿逼真 3D 布料图案效果

    HTML5 规范引进了很多新特性,其中最令人期待的之一就是 Canvas 元素,HTML5 Canvas 提供了通过 JavaScript 绘制图形的方法,非常强大.下面给大家分享一个 HTML5 C ...

  4. Android 滑动效果进阶篇(五)—— 3D旋转

    前面介绍了利用Android自带的控件,进行滑动翻页制作效果,现在我们通过代码实现一些滑动翻页的动画效果. Animation实现动画有两个方式:帧动画(frame-by-frame animatio ...

  5. JQ 实现轮播图(3D旋转图片轮播效果)

    轮播图效果如下: 代码: <!DOCTYPE html> <html xmlns="/www.w3.org/1999/xhtml"> <head> ...

  6. 32.qt quick-模仿QQ登录界面实现3D旋转(Rotation、Flipable)

    要想模仿QQ登录界面的3D旋转,我们需要学习Rotation和Flipable.由于没找到QQ的资源图,所以我们以两个图片为例模仿QQ的3D旋转,如下图所示: 最终效果如下所示: 1.Rotation ...

  7. 37.qt quick- 高仿微信实现局域网聊天V3版本(添加登录界面、UDP校验登录、皮肤更换、3D旋转)

    1.版本介绍(已上传至群里) 版本说明: 添加登录界面. UDP校验登录. 皮肤更换. 3D旋转(主界面和登录界面之间切换) . 效果图如下所示: 如果效果图加载失败,可以去哔哩哔哩 https:// ...

  8. 【CSS3进阶】酷炫的3D旋转透视

    之前学习 react+webpack ,偶然路过 webpack 官网 ,看到顶部的 LOGO ,就很感兴趣. 最近觉得自己 CSS3 过于薄弱,想着深入学习一番,遂以这个 LOGO 为切入口,好好研 ...

  9. CSS3——3D旋转图(跑马灯效果图)

    CSS3新增了很多新的属性,可以用很少的代码实现炫酷的动画效果,但由于兼容性各浏览器的能力存在不足,有特别需求的网站就呵呵啦.H5C3已是大势所趋了,之前看过一个新闻,Chrome将在年底全面转向H5 ...

随机推荐

  1. 「JLOI2011」「LuoguP4568」飞行路线(分层图最短路

    题目描述 Alice和Bob现在要乘飞机旅行,他们选择了一家相对便宜的航空公司.该航空公司一共在nn个城市设有业务,设这些城市分别标记为00到n-1n−1,一共有mm种航线,每种航线连接两个城市,并且 ...

  2. robotium 测试APK<一> 建立测试工程

    1.准备Android开发环境 2.准备签名工具http://www.troido.de/re-sign.jar 1.建立测试工程 打开Eclipse,点击File->New一个Android ...

  3. JSOI2008星球大战——联通块数量

    题目:https://www.luogu.org/problemnew/show/1197 此题不能按时间顺序进行删点.求连通块数量,而应打破时间的思维,先形成一张没有要删去的点的图,再从后往前逐个加 ...

  4. PowerShell自动部署网站—(1)、安装IIS[添加角色和角色服务]

    #------添加角色/角色服务------ Import-Module servermanager $features = get-windowsfeature Net-*,Telnet-*,Web ...

  5. JAVA,MYSQL,ORACLE的数据类型对比

    MySQL Data Type Oracle Data Type Java BIGINT NUMBER(19, 0) java.lang.Long BIT RAW byte[] BLOB BLOB,  ...

  6. Spring 源码解析之DispatcherServlet源码解析(五)

    spring的整个请求流程都是围绕着DispatcherServlet进行的 类结构图 根据类的结构来说DispatcherServlet本身也是继承了HttpServlet的,所有的请求都是根据这一 ...

  7. MySQL锁之一:锁详解

    一.    什么是死锁 死锁是指两个或两个以上的进程在执行过程中,因争夺资源而造成的一种互相等待的现象,若无外力作用,它们都将无法推进下去.此时称系统处于死锁状态或系统产生了死锁,这些永远在互相等的进 ...

  8. [hdu2196]Computer树的直径

    题意:求树中距离每个节点的最大距离. 解题关键:两次dfs,第一次从下向上dp求出每个节点子树中距离其的最大距离和不在经过最大距离上的子节点上的次大距离(后序遍历),第二次从上而下dp求出其从父节点过 ...

  9. C++ Queues(队列)

    C++ Queues(队列) C++队列是一种容器适配器,它给予程序员一种先进先出(FIFO)的数据结构.1.back() 返回一个引用,指向最后一个元素2.empty() 如果队列空则返回真3.fr ...

  10. 文本情感分析(一):基于词袋模型(VSM、LSA、n-gram)的文本表示

    现在自然语言处理用深度学习做的比较多,我还没试过用传统的监督学习方法做分类器,比如SVM.Xgboost.随机森林,来训练模型.因此,用Kaggle上经典的电影评论情感分析题,来学习如何用传统机器学习 ...