jQuery+CSS3实现三维拖放相册效果

练习前很长一段时间练习，完成渐变、圆角、三维变形、拖动等点源，不会太麻烦（呵呵，哈哈哈）

设计素描 uff1a

HTML：

三维拖放专辑

CSS：

*边距：0；填充：0；}
身体，html {背景：# 000；}
PIC {。
宽度：120px；身高：180px；
保证金：150px汽车0；
border: 1px solid红；
职位：相对；
变换方式：preserve-3d； / * * /三维环境设置
/ *视角：800px；不要使用这。
变换视角（800px）rotatex（- 10deg）rotatey（0度）；
}
PIC img {。
位置：绝对；
身高：100%；宽度：100%；
边界半径：5px；
阴影：0盒0 10px # FFF；
背景梯度效应！重要*
WebKit的反映：在10px盒
WebKit的线性梯度（顶部，RGBA（0,0,0,0）80%，RGBA（0,0,0,1）100%）；
}
图片{ {
宽度：1200px；身高：1200px；
放射性背景梯度
背景：
WebKit的径向渐变（中心的中心，400px 400px，RGBA（255255255,0.2），RGBA（0,0,0,0））；
位置：绝对；
左：50%；顶端：100%；
移动位置
margin-left: - 600px；
边距：- 600px；
变换：rotatex（90度）；
边界半径：600px；
}

JQ：

$（函数（）{（））
无功imgl = $（div.pic IMG）（尺寸）； / /图片总数
/ /警报（imgl）；
无功度= 360 / / / imgl；每个图像的旋转角度
VaR罗伊= 0，火箭= 0； / /定义父盒旋转初始值
VaR xn，yn； / /定义当前点击坐标和以前的坐标距离差
var播放；定义计时器
$（div.pic IMG）。每个（功能（我）{）
设置每个图片的位置
$（这）。Css（{变换：rotatey（+ +我*°°）translatez（350px）}）；
$（这）。Attr（ondragstart
}）；
$（document）。Mousedown（功能（EV）{
每次删除定时器，防止混乱。
ClearInterval（游戏）；
单击坐标/获取当前
无功x_ = ev.clientx；
无功y_ = ev.clienty；
$（这）。Bind（MouseMove
获取移动坐标的坐标/
var x = ev.clientx；
var y = ev.clienty；
获取当前坐标和以前的坐标距离差
Xn = x-x_；
YN = y-y_；
距离到容器的数值旋转
罗伊+ = xn×0.2；
火箭- = YN×0.1；
$（）；
这里很容易看到效果。
$（div.pic）。Css（{
变换：看（800px）rotatey（+罗伊+°）rotatex（+火箭+度）
}）；
/ /点后移动到存储在x_前一点，这y_变量
x_ = ev.clientx；
y_ = ev.clienty；
}）
}）。Mouseup（function（）{）
/ /鼠标把鼠标事件，解绑
$（这）。Unbind（鼠标移动）；
当鼠标向上/惯性，缓冲效果时
玩= setInterval（）{（）函数（
距离插值逐渐变小，惯性缓冲器
xn×= 0.95；
YN * = 0.95；
在差减为负值之前，当拖动左当前点和距离时，得到绝对值。
停止/惯性
如果（Math.abs（XN）< 1math.abs（YN）＜1）{
ClearInterval（游戏）；
}
到/旋转角的距离
罗伊+ = xn×0.2；
火箭- = YN×0.1；
$（div.pic）。Css（{
变换：看（800px）rotatey（+罗伊+°）rotatex（+火箭+度）
}）；
}，30）；
}）
}）

以上是本文的全部内容，希望能对您有所帮助，希望大家多多支持。