3D旋转相册(适合新手)
<!DOCTYPE HTML> <html onselectstart="return false"> <head> <meta charset="utf-8"> <title>3D拖拽相册</title> <style> html,body{ width: 100%; height: 100%; overflow: hidden; cursor: url("img/sb.png"),auto; } *{ padding:0; margin:0; } body{ background: #000; } #wrap{ width:120px; height:180px; margin:150px auto; position: relative; /*3D转换*/ transform-style: preserve-3d; /*3D的一个观看视距*/ transform: perspective(800px); } #wrap img{ width:120px; height:180px; position: absolute; border-radius: 3px; box-shadow: 0 0 5px #fff; } </style> </head> <body> <div id="wrap"> <img src="http://pic1.hebei.com.cn/0/12/76/34/12763409_670435.jpg"> <img src="http://img.ivsky.com/img/tupian/img/201010/08/dongji-023.jpg"> <img src="http://www.taopic.com/uploads/allimg/110912/6438-11091201495864.jpg"> <img src="http://www.bz55.com/uploads1/allimg/120312/1_120312100435_8.jpg"> <img src="http://t1.niutuku.com/960/10/10-192927.jpg"> <img src="http://img2.3lian.com/2014/f2/164/d/20.jpg"> <img src="http://www.taopic.com/uploads/allimg/110912/6438-11091201495864.jpg"> <img src="http://pic39.nipic.com/20140226/18071023_154707834000_2.jpg"> <img src="http://www.taopic.com/uploads/allimg/121218/234734-12121Q30S562.jpg"> <img src="http://img.ivsky.com/img/tupian/img/201010/12/daziran-015.jpg"> <img src="http://img.article.pchome.net/00/26/98/56/pic_lib/wm/zjjbz2_06.jpg"> </div> </body> </html> <script> var oWrap = document.getElementById("wrap"); //在window窗口加载外成功后触发 window.onload = function(){ var oImg = oWrap.getElementsByTagName("img"); //360处于所有的img 求出一个img所占的度数 var Deg = 360 / oImg.length; //32.333 console.log(Deg) for(var i = 0; i < oImg.length; i++){ //设置每个img的旋转角度 chuan si fuo mu oImg[i].style.transform = 'rotateY('+ Deg * i + 'deg) translateZ(350px)'; //开始拖动时触发 oImg[i].ondragstart = function(){ return false; } } var roX = 0, roY = 0; /**********************内部样式*******************************/ document.onmousedown = function(event){ //获取鼠标点击时候的坐标 x_ = event.clientX; y_ = event.clientY; //鼠标在移动时 this.onmousemove = function(event){ //获取鼠标移动时候的坐标 x = event.clientX; y = event.clientY; //获取点击和移动时候的偏移量 xN = x - x_; yN = y - y_; //增加缓动的动作 roY += xN * 0.1 ; roX -= yN * 0.1; //设置3D 元素距视图的距离为800 旋转X轴 和Y周 //perspective 3D效果的一个观看视距 oWrap.style.transform = 'perspective(800px) rotateX('+ roX+'deg) rotateY('+ roY+'deg)'; //就是获取当然动态点的坐标,为了下一次鼠标点击做参考 x_ = event.clientX; y_ = event.clientY; } this.onmouseup = function(){ this.onmousemove = null; } } } </script>
3D旋转相册(适合新手)的更多相关文章
- css3+jquery制作3d旋转相册
首先来看一下今天的炫酷效果: 首先分析一下这张图片: 1.每张图片都有倒影 2.这11张图片呈圆形均匀排列 3.可旋转,上下移动(当然这是效果做出来以后,图片是分析不出来的) 那下面就开始吧. 一.准 ...
- css3制作3d旋转相册
此处只是记录,解析可见原文:http://www.cnblogs.com/skyblue-li/p/6092799.html <!DOCTYPE html> <html xmlns= ...
- 3D旋转相册的实现
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- CSS3实现3D旋转相册
静态效果图: 代码如下: <!doctype html><html lang="en"><head> <meta charset=&quo ...
- Flash相册-------3D旋转应用
1.图层一,图片1,转换为元件 2.3D旋转工具,变形--->y->180
- 解惑:如何使用html+css+js实现旋转相册,立方体相册等动画效果
解惑:如何使用html+css+js实现旋转相册,立方体相册等动画效果 一.前言 最初还是在抖音上看到可以使用简单地代码实现炫酷的网页效果的,但是想要找到可以运行的代码还是比较困难的,最近突然想起就在 ...
- 360度3D 旋转插件
Circlr插件是一款基于jQuery的可以对图片进行360度全方位旋转展示的插件.Circlr通过按一定角度规律拍摄的产品图片,制作出可以使用鼠标拖动.鼠标滚轮和移动触摸来进行图片逐帧旋转的效果.比 ...
- 【CSS3进阶】酷炫的3D旋转透视
之前学习 react+webpack ,偶然路过 webpack 官网 ,看到顶部的 LOGO ,就很感兴趣. 最近觉得自己 CSS3 过于薄弱,想着深入学习一番,遂以这个 LOGO 为切入口,好好研 ...
- 3D旋转菜单
今天来个3D旋转菜单,是纯css3实现的,主要用到transform,transition,backface-visibility. 主要是transform这个变换,它是今天猪脚. transfor ...
随机推荐
- VirtrualBox使用已存在的镜像创建虚拟机
再将一个已经存在的虚拟机镜像拷贝为另一个新的虚拟机镜像后,要将该新的镜像添加到新的虚拟机中时会出现错误提示,从而导致不能创建虚拟机.例如有'D:\App\VirtualBox VMs\CentOS_6 ...
- CORBA IOR学习
Interoperable Object References: IOR IOR用于表示一个对象引用,我们知道,当我们在客户端一个CORBA对象的时候,接触的并不是真正的对象,而是这个对象的代理(Pr ...
- Allegro 快捷键设置
一.快捷键设置 Allegro可以通过修改env文件来设置快捷键,这对从其它软件如AD或PADS迁移过来的用户来说,可以沿用以前的操作习惯,还是很有意义的. Allegro的变量文件一共有2个:一个是 ...
- js正则表达式学习
//几种字符串操作:var str = 'abcdef'; alert(str.search('b')); //弹出1:返回的是b在str中的位置:如果找不到返回-1: alert(str.subst ...
- git bash下对文件的操作
window下的e盘中webpack文件夹操作 新建文件夹:mkdir wpdemo: 新建文件:touch index.html; 删除文件夹:rm -r wpdemo; 删除文件:rm index ...
- PC机上的COM1口和COM2口
现在PC机一般有两个串行口COM1和COM2. 串口叫串行接口 串口与并口不同之处:数据和控制信息时一位接一位地传送出去的,虽然速度慢,但传送距离较并口会更长,因此若要进行较长距离的通行时,应该使用串 ...
- 一次完整的HTTP请求流程
HTTP通信机制是在一次完整的HTTP通信过程中,Web浏览器与Web服务器之间将完成下列7个步骤: 1. 建立TCP连接: 在HTTP工作开始之前,Web浏览器首先要通过网络与Web服务器建立连接, ...
- windows下CMake使用图文手册 Part 2
例子2:有目录的项目 我现在有个文件夹ProjectDate,有如下文件结构 E:. │ CMakeLists.txt │ ├─include │ Date.h │ └─src ...
- Error 2103 “Unhandled Error in Silverlight Application“ 解决办法
当调试SilverLight项目时,如果出现如下错误: 当调试页面时出现如下错误: 解决办法为:打开工程属性,在Startup object:处选择相应的启动应用程序.
- ubuntu下git安装及使用
ubuntu下git安装及使用 其实,好几个月前,就已经安装好了,可是一直搁置在那儿,所以密码等一些其它细节都忘的差不多了,所以今天就重新部署了一下,并开始积极使用......... 1,git ...