很久之前练习过的一个实践，复习完渐变、圆角、3D变形、拖拽等等来看源码，估计还不会太凌乱(﹏)哈哈哈

效果图：

HTML:

！doctype html html on selectstart=' return false；'lang='en '！- !重要标题元字符集='UTF-8 '标题三维（three dimension的缩写）拖拽相册/title link rel='样式表href='css/style.css'/headbody！- html上阻止默认行为onselectstart-div class=' pic ' img src=' http : images/1。jpg '/img src=' http : images/2。jpg '/img src=' http : images/3。jpg '/img src=' http : images/4。jpg '/img src=' http : images/5。jpg '/img src=' http : images/6 .

* {边际：0划水：0;}正文，html { background: # 000}。pic { width:120px高度：180 px余量：150px自动0;border:1px纯红；位置：相对；变换样式： preserve-3d；/*设置三维(三维的缩写)环境*//*透视图：800 px不用这个*/transform :透视(800 px)Rotatex(-10)Rotatey(0)；}.pic img { position:absolute高度：100%;宽度：100%;边界半径：5像素；箱形阴影：0 0 10px # fff/*背景渐变效果！重要*/-网络套件-盒子-反射：低于10px-web kit-线性-渐变(顶部，rgba(0，0，0，0) 80%，rgba(0，0，1)100%)；}.pic p { width:1200px高度高度：1200px/*放射性背景渐变*/background :-web套件-径向-渐变(中心中心，400px 400px，rgba(255，255，255，0.2)，rgba(0，0，0，0))；位置：绝对；左侧：50%;前：100%；/*往回移动位置*/边距-左侧：-600像素；边距-top :-600 px；变压器： rotatex(90度);边界半径：600像素；}JQ:

$(function(){ var imgL=$(' div . pic img ')。size()；//获取图片总数//alert(IMgl)；var deg=360/IMgl；//每张图片所需的旋转角度为var roY=0，RoX=0；//定义父框旋转var xN，yN的初始值；//定义当前点击的坐标与前一个坐标之间的距离差var play//定义定时器$ ('div。picimg ')。每个(函数(I){//设置每个图片的3D位置$ (this)。CSS({ ' transform ' : ' rotate(' I * deg ' deg)translate z(350 px)' })；$(这个)。attr('ondragstart '，' return false ')；//每张图片禁止拖放})；$(文档)。mousedown(函数(ev){//每次先清除定时器，防止clearInterval(播放)混淆；//获取当前点击的坐标var x _=ev.clientXvar y _=ev.clientY$(这个)。bind ('mousemove '，函数(ev){//获取移动后的坐标var x=ev.clientXvar y=ev.clientY//得到移动后当前坐标与前一个坐标的距离差xN=x-x _；yN=y-y _；//将距离差转换为容器旋转的值roY=xN * 0.2roX-=Yn * 0.1；/* $(“body”)。追加(' div style=' background:red宽度：5 px；height:5px位置：绝对；top: ' y ' pxleft: ' x ' px/div ')；这里，为了方便看到效果*/$ ('div.pic ')。CSS ({'transform' : '透视(800 px)rotatey(' Roy ' deg)rotatex(' rox ' deg)' })；//将移动后的点设置为前一点，存储在x_，y_ variable x_=ev.clientX中；y _=ev.clientY}) }).mouseup(function(){ //解除鼠标移动事件$(this)的绑定。当鼠标升起时解除绑定(' mouse move ')；//鼠标抬起时，实现惯性缓冲效果play=setInterval(函数(){ //慢慢缩小距离插值，实现惯性缓冲xN *=0.95yN *=0.95//向左拖动时，当前点与前一点的距离差为负，取绝对值。//停止惯性如果(数学。ABS(xn)1路径。ABS (yn) 1) {Clearinterval(播放)；}//将距离差转换为旋转角度roY=xN * 0.2roX-=Yn * 0.1；$('div.pic ')。css({ 'transform': '透视(800 px)Rotatey(' RoY ' deg)Rotatex(' RoX ' deg)' })；},30);})})以上就是本文的全部内容。希望对大家的学习有帮助，支持我们。