css3+jquery制作3d旋转相册
首先来看一下今天的炫酷效果：
首先分析一下这张图片：
1.每张图片都有倒影
2.这11张图片呈圆形均匀排列
3.可旋转，上下移动（当然这是效果做出来以后，图片是分析不出来的）
那下面就开始吧。
一。准备
新建三个文件夹分别命名为css,js,img分别存放demo.css，jquery.js、demo.js，11张示例图片。新建demo.html将demo.css，jquery.js，demo.js引入。
二。图片倒影制作
<div id="wrap">
<img src="img/1.jpg">
<img src="img/2.jpg">
<img src="img/3.jpg">
<img src="img/4.jpg">
<img src="img/5.jpg">
<img src="img/6.jpg">
<img src="img/7.jpg">
<img src="img/8.jpg">
<img src="img/9.jpg">
<img src="img/10.jpg">
<img src="img/11.jpg">
</div>
首先我们新建一个大的div来包裹这11张图片
*{
padding:;
margin:;
}
body{
background:#000;
overflow:hidden;
}
#wrap{
width:133px;
height:200px;
margin: 200px auto;
position:relative;
transform-style:preserve-3d;
transform:perspective(900px) rotateX(-10deg) rotateY(0deg);
}
#wrap img{
position:absolute;
top:;
left:;
box-shadow: 0 0 10px #FFFFFF;
border-radius:10px;
box-reflect:below 8px linear-gradient(top,rgba(0,0,0,0) 40%,rgba(0,0,0,.7) 100%);
-webkit-box-reflect:below 8px -webkit-linear-gradient(top,rgba(0,0,0,0) 40%,rgba(0,0,0,.7) 100%);
}
（1）*这里就不多说了，是为了消除浏览器默认的间距。
（2）body属性设置背景颜色为黑色，溢出隐藏（这里主要是为了不出现滚动条影响图片整体效果）。
（3）#wrap它的宽高大家一定很好奇为什么会那么小，他的宽高是等同于一张图片的宽高，这里是为了使后期制作旋转时候它能够以图片自身旋转而不跑偏（这里大家不明白的话，可以写完所有代码后设置一个较大的值，试试就知道了哦）。
margin主要是为了让图片水平居中距上下200px。
transform-style:preserve-3d主要是让图片展示出3d效果。
transform:perspective(900px)[这个属性设置镜头到元素平面的距离（大家如果不好理解的话就记住这个是利用近大远小的道理后期可以调节他的大小实验哦）] rotateX(-10deg)[围绕x轴旋转-10°] rotateY(0deg)[围绕y轴旋转0°]。告诉大家一个简单易懂的方法，画一个平面直角坐标系，这是非常直观的。
（4）#wrap img是规定了#wrap里面的img属性，前面的绝对定位是为了让所有图片重叠在一起。
box-shadow设置设置了他的阴影效果
border-radius设置了它的圆角大小
box-reflect设置它的倒影效果
这里就不过多陈述css3属性的用法了，大家可以在w3c查看。
二。使图片均匀分布
$(function(){
$('#wrap img').each(function(i) {
//遍历 $('#wrap img')----改变他们的css样式
$(this).css('transform', 'rotateY('+ i*Deg +'deg) translateZ(350px)').attr('ondragstart','return false');
//旋转以及禁止拖拽复制
});
})
如果设置css属性有疑问的话，可以这样想：translateZ(350px)设置了Z轴的距离，把他看成以(0,0)为圆心，350px为半径的圆，把图片均匀分布在圆上。
这里设置了图片禁止拖拽的属性，与之相呼应的是我们需要的html页面加上这个属性
<html onselectstart='return false'>
不加这个的话页面会报错。当然如果不加的话不影响现在图片的显示，但是会影响下面做图片的旋转。
进行到这步为止，图片上的效果就展示出来了，但是现在是生硬的，没有动画，只是静态的显示。
三。旋转、移动图片
思路：
当鼠标按下并滑动的时候wrap的整体也是跟着滑动的，所以需要记录鼠标开始到结束的位置，根据鼠标x轴和y轴之间的差值，计算#wrap需要旋转和移动的大小
$(function(){
var imgL = $('#wrap img').length;
//获取当前的img 长度
var Deg = 360 / imgL;
// 360/imgL 和角度有关系
var roY = 0,roX = -10,xN,yN;
$(document).mousedown(function(ev){
//绑定事件 鼠标按下时触发的时间
var x_ = ev.clientX;
//获取当前鼠标相对于浏览器页面（或客户区）的 x 方向的位置 保存在变量 x_
var y_ = ev.clientY;
//………………y方向的位置 保存在变量y_
$(this).bind('mousemove',function(ev){
//给当前元素 （这里的当前元素是document ）绑定 mousemove（鼠标在当前元素内移动的事件）
var x = ev.clientX;
//获取当前鼠标相对于浏览器页面（或客户区）的 x 方向的位置 保存在变量 x
var y = ev.clientY;
//………………y方向的位置 保存在变量y
xN = x - x_;
//计算鼠标在当前元素内 相对 上次鼠标按下时的 x轴距离 并保存在变量
yN = y - y_;
//计算鼠标在当前元素内 相对 上次鼠标按下时的 y轴距离 并保存在变量
roY += xN*0.2;
//按照比例换算 并在变量基础上增加（围绕Y轴旋转的角度，之所以乘0.2是为了不让自己的鼠标动作太敏感，可以改变数值试一下，理解个中含义）
roX +=yN*0.07;
//按照比例换算 并在变量基础上增加（围绕x轴旋转的角度，意义同上）
$('#wrap').css('transform','perspective(800px) rotateX('+ roX +'deg) rotateY('+ roY +'deg)');
//$('#wrap') 改变css动画transform样式 值为…………角度是变量roY,roX的
x_ = ev.clientX;
//并将鼠标按下的位置设置成当前移动到的位置
y_ = ev.clientY;
//并将鼠标按下的位置设置成当前移动到的位置
});
}).mouseup(function(){
//绑定事件 鼠标松开时触发的时间
$(this).unbind('mousemove');
// 移除 当前元素（这里的当前元素是document ）的 mousemove（鼠标在当前元素内移动的事件）
});
});
注释讲的很清楚，这里就不过多赘述了，到现在已经可以看到效果了，按住鼠标左键上下拖动试试吧。
但是到此为止看到的效果又显得很生硬，不流畅，所以为他加个定时器，来让图片真正的转动起来。
$(function(){
var imgL = $('#wrap img').size();
//获取当前的img 长度
console.log($('#wrap img').size());
var Deg = 360 / imgL;
// 360/imgL 和角度有关系
var roY = 0,roX = -10,xN,yN,play=null;
//挨个赋值
$('#wrap img').each(function(i) {
//遍历 $('#wrap img')----改变他们的css样式
$(this).css('transform', 'rotateY('+ i*Deg +'deg) translateZ(350px)')
.attr('ondragstart','return false');
//旋转以及禁止拖拽复制
});
$(document).mousedown(function(ev){
//绑定事件 鼠标按下时触发的时间
clearInterval( play );
//关闭计时器(play)
var x_ = ev.clientX;
//获取当前鼠标相对于浏览器页面（或客户区）的 x 方向的位置 保存在变量 x_
var y_ = ev.clientY;
//………………y方向的位置 保存在变量y_
$(this).bind('mousemove',function(ev){
//给当前元素 （这里的当前元素是document ）绑定 mousemove（鼠标在当前元素内移动的事件）
var x = ev.clientX;
//获取当前鼠标相对于浏览器页面（或客户区）的 x 方向的位置 保存在变量 x
var y = ev.clientY;
//………………y方向的位置 保存在变量y
xN = x - x_;
//计算鼠标在当前元素内 相对 上次鼠标按下时的 x轴距离 并保存在变量
yN = y - y_;
//计算鼠标在当前元素内 相对 上次鼠标按下时的 y轴距离 并保存在变量
roY += xN*0.2;
//按照比例换算 并在变量基础上增加
roX +=yN*0.07;
//按照比例换算 并在变量基础上增加
$('#wrap').css('transform','perspective(800px) rotateX('+ roX +'deg) rotateY('+ roY +'deg)');
//$('#wrap') 改变css动画transform样式 值为…………角度是变量roY,roX的
x_ = ev.clientX;
//并将鼠标按下的位置设置成当前移动到的位置
y_ = ev.clientY;
//并将鼠标按下的位置设置成当前移动到的位置
});
}).mouseup(function(){
//绑定事件 鼠标松开时触发的时间
$(this).unbind('mousemove');
// 移除 当前元素（这里的当前元素是document ）的 mousemove（鼠标在当前元素内移动的事件）
play = setInterval(function(){
//开始周期性计时器
xN = xN * 0.95;
//按照比例换算
yN = yN * 0.95;
//按照比例换算
if ( Math.abs(xN) <= 0.5 && Math.abs(yN)<= 0.5 )
//判断 (xN的绝对值<=0.5)而且 yN的绝对值也要<= 0.5)的时候就执行下面的语句
{
clearInterval( play );
//关闭计时器(play)
}
roY += xN*0.2;
//按照比例换算 并在变量基础上增加
roX +=yN*0.07;
//按照比例换算 并在变量基础上增加
$('#wrap').css('transform','perspective(800px) rotateX('+ roX +'deg) rotateY('+ roY +'deg)');
//$('#wrap') 改变css动画transform样式 值为…………角度是变量roY,roX的
},30);
//计时器每30毫秒触发一次
});
});
这里为了比较直观定时器放在哪里，重复了上面的代码。
解释一下定时器：
当鼠标松开的时候如果没有定时器的话，旋转就到此为止了，但是这并不是这个效果想要的，当鼠标滑动幅度较大的时候，图片整体也会旋转不同角度，距离越大旋转的角度也就越大，并且到一定数值后让定时器停下来，代码与上面旋转的类似，这里不过多赘述。这里注意的是，一定要定时器停下来。乘不同数值会有不同的效果，如果不是很理解的话，改变数值看效果是你最好的选择，最近状态不好，思路可能没有之前写的好，请见谅/(ㄒoㄒ)/~~
css3+jquery制作3d旋转相册的更多相关文章
- CSS3特效----制作3D旋转导航
大致思路:首先给 three-d-box 设置一个 transition是不可少的 然后每个 a 标签里面有两个 span 一个叫 font 一个叫 back,默认状态下 font 旋转0度,也就是没 ...
- css3制作3d旋转相册
此处只是记录,解析可见原文:http://www.cnblogs.com/skyblue-li/p/6092799.html <!DOCTYPE html> <html xmlns= ...
- CSS3特效----制作3D旋转照片展示区
任务一.制作多背景 提示:上层有一个径向渐变,渐变图像farthest-side ellipse at center, rgba(246,241,232,.85) 39%,rgba(212,204, ...
- 一款基于jQuery和CSS3炫酷3D旋转画廊特效插件
这是一款效果炫酷的jQuery和CSS3 3D旋转画廊特效插件.该3D画廊插件可以通过前后导航按钮来切换图片,效果就像旋转木马一样.它还带有点击放大图片,显示图片标题和用键盘操作等功能. 在线预览 ...
- 使用 CSS3 & jQuery 制作漂亮的书签动画
今天的教程是关于创建使用 CSS 旋转变换和 JavaScript 制作动画书签效果.我们的想法是展现出样书状结构,使单一的色板或列表点击切换.当点击其中一项,我们就会旋转以显示所选择的项目. 在线演 ...
- 纯CSS3超酷3D旋转立方体动画特效
简要教程 这是一款神奇的纯 CSS3 立方体动画特效插件.使用CSS3来制作动画效果已经成为WEB前端开发的一种时尚,从简单的颜色和尺寸动画,到复杂的旋转.翻转动画, CSS3 展现了它无穷的魅力.使 ...
- CSS3制作3D旋转视频展示区
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- CSS3实现3D旋转相册
静态效果图: 代码如下: <!doctype html><html lang="en"><head> <meta charset=&quo ...
- 3D旋转相册（适合新手）
<!DOCTYPE HTML> <html onselectstart="return false"> <head> <meta char ...
随机推荐
- Android之DOM解析XML
一．DOM解析方法介绍 DOM是基于树形结构的节点或信息片段的集合,允许开发人员使用DOM API遍历XML树,检索所需数据.分析该结构通常需要加载整个文档和构造树形结构,然后才可以检索和更新节点信息 ...
- RTP与RTCP协议介绍（转载）
RTSP发起/终结流媒体.RTP传输流媒体数据 .RTCP对RTP进行控制,同步.RTP中没有连接的概念,本身并不能为按序传输数据包提供可靠的保证,也不提供流量控制和拥塞控制,这些都由RTCP来负责完 ...
- fhq treap最终模板
新学习了fhq treap,厉害了 先贴个神犇的版, from memphis /* Treap[Merge,Split] by Memphis */ #include<cstdio> # ...
- [异常特工]android常见bug跟踪
前言 对app的线上bug的收集(友盟.云捕等)有时会得到这样的异常堆栈信息:没有一行代码是有关自身程序代码的.这使得对bug的解决无从下手,根据经验,内存不足OOM,Dialog关闭,ListVie ...
- SQLSERVER中NULL位图的作用
SQLSERVER中NULL位图的作用 首先感谢宋沄剑提供的文章和sqlskill网站:www.sqlskills.com,看下面文章之前请先看一下下面两篇文章 SQL Server误区30日谈-Da ...
- 机器指令翻译成 JavaScript —— No.2 跳转处理
上一篇,我们发现大多数 6502 指令都可以直接 1:1 翻译成 JS 代码,但除了「跳转指令」. 跳转指令,分无条件跳转.条件跳转.从另一个角度,也可分: 静态跳转:目标地址已知 动态跳转:目标地址 ...
- Java垃圾回收
垃圾收集算法 引用计数 堆中的每个对象都有一个引用计数,当对象被引用时引用计数加1,当对象的引用被重新赋值或超出有效区域时引用计数减1,当一个对象被回收后,它所引用的对象的引用计算减1.当一个对象的引 ...
- ABP(现代ASP.NET样板开发框架)系列之9、ABP设置管理
点这里进入ABP系列文章总目录 基于DDD的现代ASP.NET开发框架--ABP系列之9.ABP设置管理 ABP是“ASP.NET Boilerplate Project (ASP.NET样板项目)” ...
- CSS权威指南之css声明，伪类，文本处理--(简要笔记一)
1.css层叠的含义 后面的会覆盖前面的样式 2.每个元素生成一个框,也称盒. 3.替换元素和非替换元素. img如果不指定src的外部路径,该元素就没有意义.他由文档本身之外的一个图像文件来替换 ...
- Boostrap入门(一)
1.第一步:下载Boostrap有关文件 Boostrap中文网:http://www.bootcss.com/ -->--> 2.第二步: 如下代码:引入相关文件即可. <!DOC ...