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 ...
随机推荐
- UNR #1 火车管理
很简单 用一个线段树维护 1.答案 2.当前栈顶是什么时候push进来的 然后用一棵以时间为版本的可持久化线段树维护每个操作之后第一个覆盖到他的操作是哪个 就可以了 询问直接在线段树上询问,修改在两棵 ...
- PowerDesigner根据SQL文件生成PDM数据字典
当PowerDesigner不能直接连接到数据库的时候,可以用到下面这个方法生成数据字典(直接连接数据库生成数据字典在上次随笔中有介绍). 具体操作步骤截图: ↓↓↓这里选择的sql文件是从数据库导出 ...
- Scala学习——array与arraybuffer的区别(初)
1.由于Array是不可变的,所以不能直接地对其元素进行删除操作,只能通过重赋值或过滤生成新的Array的方式来删除不要的元素. 而ArrayBuffer是可变的,本身提供了很多元素的操作,当然包括删 ...
- asp.net mvc 注册中的邮箱激活功能实现
基本流程图 注册页面就不再写出,现在将发送邮件的代码粘贴出来 public ActionResult SendEmial() { ; string validataCode = System.Gu ...
- SQLServer中连接个数及超时问题
超时时间已到.超时时间已到,但是尚未从池中获取连接.出现这种情况可能是因为所有池连接均在使用,并且达到了最大池大小. 解决办法1.在代码里面,把未关闭的连接关闭2.扩大共享池,方法如下:解决方法可以是 ...
- CF-839B
B. Game of the Rows time limit per test 1 second memory limit per test 256 megabytes input standard ...
- prototype for '类名::函数名'does not match any in class'类名'
函数声明和定义参数类型必须相同. 前置声明一定要放到名称空间内,代表该名称空间内的类.
- 3-C++程序的结构1.5
多文件结构和编译预处理命令 1.c++程序的一般组织结构 通常一个项目至少划分为三个文件:类定义文件(*.h文件).类实现文件(*.cpp文件)和类的使用文件(*.cpp,主函数文件).如下: 这三个 ...
- NOIP2014提高组 联合权值(距离为2的树形dp)
联合权值 题目描述 无向连通图 GG 有 nn 个点,n-1n−1 条边.点从 11 到 nn 依次编号,编号为 ii 的点的权值为 W_iWi,每条边的长度均为 11.图上两点 (u, v)(u, ...
- SPFA(热浪)
1557 热浪 时间限制: 1 s 空间限制: 256000 KB 题目等级 : 钻石 Diamond 题解 查看运行结果