jquery+css3实现3d滚动旋转

最近有个漂亮妹子一直在向我推销潭州的视频，BUT我以前就看了一次觉得挺水的，就对那个妹子表示吾孤高。你们那玩意没意义的很弱。然后那个漂亮妹子锲而不舍的对我发链接，这个效果会吗，这个幻灯会写吗。。。我也是醉了。。。直到有一天

那个漂亮妹子也不知道被我的孤高，独孤求败人生寂寞如雪的气质给怒了，拿出了她的必杀技

http://xiaobai.52nhw.com/image/pic.gif

好吧乍一看挺唬人的。。。好吧，我确实被她给唬住了！然后先是加群又是关注的。。。最后搞到一个包。。。

然后你认为07-03就是你想看到的代码了吗。。。太天真了

里面就一个jquery的库和一堆阿猫阿狗的照片

然后老老实实的看视频把，，实际上我是一直在快进。。。。反正最后我快进完了大概的亮点么也就2个。。。还是不罗嗦了上代码

<div class="job">
  <div class="jobPicBox">
    <div class="JobPicImages"> 

      <img src="image/job/archer.jpg" /> 

      <img src="image/job/assassin.jpg" /> 

      <img src="image/job/avenger.png" /> 

      <img src="image/job/berserker.jpg" /> 

      <img src="image/job/caster.jpg" /> 

      <img src="image/job/lancer.jpg" /> 

      <img src="image/job/rider.jpg" /> 

      <img src="image/job/saber.jpg" /> 

    </div>
  </div>
</div>

HTML么就是建个盒子搞个几张图片

.JobPicImages{
transform-style:preserve-3d;
transform:perspective(1000px) rotateX(-10deg) rotateY(0deg);
position:relative;
width:100px;
height:172px;
margin:200px auto 0;}
.JobPicImages img{
height:100%;
width:100%;
position:absolute; border-radius:5px; box-shadow:1px 1px 5px #333;
-webkit-box-reflect:below 10px -webkit-linear-gradient(transparent,transparent 50%,rgba(0,0,0,1));
outline:none;
}

css么又几个亮点了

-webkit-box-reflect:below 10px -webkit-linear-gradient(transparent,transparent 50%,rgba(0,0,0,1));

duang duang duang css3的投影+径向渐变版透明

然后么jquery。。。他都没用js

$(function(){
    var JobPic = $(".JobPicImages img").size();
    var deg = 360/JobPic;
    var roy = 0;
    var rox = -10;
    var xn = 0;
    var yn = 0;
    var play=null
    $(".JobPicImages img").each(function(i) {
        $(this).css({‘transform‘:‘rotateY(‘ + deg*i + ‘deg) translatez(350px)‘});
        $(this).attr(‘ondragstart‘,‘return false‘)
    });
    $(document).mousedown(function(ev){
        var x_=ev.clientX;
        var y_=ev.clientY;
        clearInterval(play);
        $(this).bind(‘mousemove‘,function(ev){
            var x=ev.clientX;
            var y=ev.clientY;
            xn = x - x_;
            yn = y - y_;
            roy += xn*0.2;
            rox += yn*0.1;
            $(".JobPicImages").css({
transform:‘perspective(1000px) rotateX(‘ +rox+‘deg)     rotateY(‘ +roy+‘deg)‘
            },300)
            x_=ev.clientX;
            y_=ev.clientY;
        });
    }).mouseup(function(){
       $(this).unbind(‘mousemove‘);
        var play = 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;
            $(".JobPicImages").css({
transform:‘perspective(1000px) rotateX(‘ +rox+‘deg)     rotateY(‘ +roy+‘deg)‘
            },300)
        })
    })
})

。。。最后么js么无非就是记录鼠标按下之后拖动的位置和鼠标抬起记录鼠标的位置，然后做个比较，然后转啊转，好吧实际上也没什么特别亮眼的地方但是效果还是挺有趣的

DEMO：http://xiaobai.52nhw.com/job.html