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://www.skt1.cn/備份/job.html