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)
        })
    })
})