jQuery实现可拖拽3D万花筒旋转特效
这是一个使用了CSS3立体效果的强大特效，本特效使用jQuery跟CSS3transform来实现在用户鼠标按下拖动时，环形图片墙可以跟随鼠标进行3D旋转动画。
进去后可以上下左右的拖动图片。
本示例中使用到了CSS3的transform-style属性，该规定如何在3D空间中呈现被嵌套的元素。
默认值： flat
继承性： no
版本： CSS3
JavaScript语法： object.style.transformStyle="preserve-3d"
有2个属性值可选择：
flat 子元素将不保留其3D位置。
preserve-3d 子元素将保留其3D位置。
示例代码如下：
<!DOCTYPEhtml>
<htmllang="zh">
<head>
<metacharset="UTF-8">
<metahttp-equiv="X-UA-Compatible"content="IE=edge,chrome=1">
<metaname="viewport"content="width=device-width,initial-scale=1.0">
<title>jQuery可拖拽3D万花筒旋转特效-何问起</title><basetarget="_blank"/>
<styletype="text/css">
*{margin:0;padding:0;}
.hovertree{
width:120px;
height:180px;
margin:150pxauto0;
position:relative;
/*transform旋转元素*/
transform-style:preserve-3d;
transform:perspective(800px)rotateX(-10deg)rotateY(0deg);
}
body{background-color:#66677c;}
.hovertreeimg{
position:absolute;
width:100%;
height:100%;
border-radius:5px;
box-shadow:0px0px10px#fff;
/*倒影的设置*/
-webkit-box-reflect:below10px-webkit-linear-gradient(top,rgba(0,0,0,0)50%,rgba(0,0,0,.5)100%);
}
.hovertreep{
width:1200px;
height:1200px;
background:-webkit-radial-gradient(centercenter,600px600px,rgba(255,255,255,.5),rgba(0,0,0,0));
position:absolute;
top:100%;left:50%;
margin-top:-600px;
margin-left:-600px;
border-radius:600px;
transform:rotateX(90deg);
}
.hewenqi{position:absolute;z-index:99;}
a{color:blue;}
</style>
</head>
<body>
<divclass="hovertree">
<imgsrc="http://hovertree.com/texiao/css/14/hovertreepic/01.jpg"/>
<imgsrc="http://hovertree.com/texiao/css/14/hovertreepic/02.jpg"/>
<imgsrc="http://cms.hovertree.com/hvtimg/201511/9rour12a.jpg"/>
<imgsrc="http://hovertree.com/texiao/css/14/hovertreepic/04.jpg"/>
<imgsrc="http://hovertree.com/texiao/css/14/hovertreepic/05.jpg"/>
<imgsrc="http://hovertree.com/texiao/css/14/hovertreepic/06.jpg"/>
<imgsrc="http://hovertree.com/texiao/css/14/hovertreepic/07.jpg"/>
<imgsrc="http://hovertree.com/texiao/css/14/hovertreepic/08.jpg"/>
<imgsrc="http://hovertree.com/hvtimg/201511/6j9j6tk5.png"/>
<imgsrc="http://cms.hovertree.com/hvtimg/201512/wfevf6yh.jpg"/>
<p></p>
</div>
<scriptsrc="http://down.hovertree.com/jquery/jquery-1.11.0.min.js"type="text/javascript"></script>
<scripttype="text/javascript">
$(function(){
varimgL=$(".hovertreeimg").size();
vardeg=360/imgL;
varroY=0,roX=-10;
varxN=0,yN=0;
varplay=null;
$(".hovertreeimg").each(function(i){
$(this).css({
//<!--translateZ定义2d旋转沿着z轴-->
"transform":"rotateY("+i*deg+"deg)translateZ(300px)"});
//<!--防止图片被拖拽-->
$(this).attr('ondragstart','returnfalse');
});
$(document).mousedown(function(ev){
varx_=ev.clientX;
vary_=ev.clientY;
clearInterval(play);
console.log('我按下了');
$(this).bind('mousemove',function(ev){
/*获取当前鼠标的坐标*/
varx=ev.clientX;
vary=ev.clientY;
/*两次坐标之间的距离*/
xN=x-x_;
yN=y-y_;
roY+=xN*0.2;
roX-=yN*0.1;
console.log('移动');
//$('body').append('<divstyle="width:5px;height:5px;position:absolute;top:'+y+'px;left:'+x+'px;background-color:red"></div>');
$('.hovertree').css({
transform:'perspective(800px)rotateX('+roX+'deg)rotateY('+roY+'deg)'
});
/*之前的鼠标坐标*/
x_=ev.clientX;
y_=ev.clientY;
});
}).mouseup(function(){
$(this).unbind('mousemove');
varplay=setInterval(function(){
xN*=0.95;
yN*=0.95
if(Math.abs(xN)<1&&Math.abs(yN)<1){
clearInterval(play);
}
roY+=xN*0.2;
roX-=yN*0.1;
$('.hovertree').css({
transform:'perspective(800px)rotateX('+roX+'deg)rotateY('+roY+'deg)'
});
},30);
});
});
</script>
<divstyle="text-align:center;margin:250px0;font:normal14px/24px'MicroSoftYaHei';">
<pclass="hewenqi">来源：<ahref="http://hovertree.com/">何问起</a><ahref="http://hovertree.com/h/bjag/5x3kdw0k.htm">说明</a></p>
</div>
</body>
</html>
以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持毛票票！