偶然在书上看到这段代码,感觉很舒服,直街附代码吧,原生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. BZOJ4408:[FJOI2016]神秘数

    浅谈主席树:https://www.cnblogs.com/AKMer/p/9956734.html 题目传送门:https://www.lydsy.com/JudgeOnline/problem.p ...

  2. poj2411铺砖——状压DP

    题目:http://poj.org/problem?id=2411 状态压缩,一行的状态记为一个二进制数,从上往下逐行DP,答案输出最后一行填0的方案数. 代码如下: #include<iost ...

  3. u-boot.lds 链接脚本分析(hi3515)

    目录:/u-boot_hi3515/board/hi3515v100 OUTPUT_FORMAT("elf32-littlearm", "elf32-littlearm& ...

  4. JAVA类型信息——Class对象(转载)

    JAVA类型信息--Class对象 一.RTTI概要 1.类型信息RTTI :即对象和类的信息,例如类的名字.继承的基类.实现的接口等. 2.类型信息的作用:程序员可以在程序运行时发现和使用类型信息. ...

  5. [hdu2087]剪花布条(KMP)

    题意:求存在模式串个数,不可重复. 解题关键:模板题.整理模板用.重复和不可重复的区别在下面已标出.主要是j的变化. #include<cstdio> #include<cstrin ...

  6. YOLO3训练widerface数据集

    因为YOLO3速度精度都很棒,所以想训练一下人脸模型,废话不多,进入正题 1写所有的配置文件 1.1 YOLO3-face.cfg 个人感觉YOLO的配置文件骑士和caffe差不多 在cfg/YOLO ...

  7. 1、R-reshape2-cast

    1.cast:     长型数据转宽型数据 (1).acast,dcast的区别在于输出结果.acast 输出结果为vector/matrix/array,dcast 输出结果为data.frame. ...

  8. Python 在windows上安装BeautifulSoup和request以及小案例

    Python以及PyCharm安装成功后,操作如下: 此时,代码import requests不报错了. 那么,Python 在windows上安装BeautifulSoup,怎么操作呢? 1. 打开 ...

  9. 世界虽大,但没有破不了的wifi

    附加知识: 无线网卡的几种常见工作模式(mode)有: master  managed monitor ad-hoc ... 1. [master] 这种模式是常见的AP模式,无线模块本身作为wifi ...

  10. 30个Python物联网小实验3:使用按钮开灯关灯

    使用按钮开灯关灯 接线图非常简单,LED接GPIO17号口,按钮接GPIO2号口,负极接GND地线. 代码也非常简单: from gpiozero import LED, Button from si ...