js+css立體旋轉

純 CSS3 制作可口可樂罐  這個效果相信大家很多人看過了，純css實現的立體可口可樂罐，看起來相當高大上~

於是今天我這小菜鳥試着研究下，稍微遺憾的是，沒有看到源碼，還是直接F12吧，貌似實現也不是那么難

大概原理圖是這樣：

當然代碼實現起來有所不同；

圖片分別如下：

       

左圖為遮罩層，其中中間透明部分可以顯示背景圖，並且添加了半透明陰影，使得效果能夠更逼真，相當於上圖中黃色滑塊，

右圖為背景圖，相當於灰色背景，在這段代碼的實現中，實例中共用了50多個p標簽來拼接，背景圖像設置為fixed，這樣當滾動時，

背景圖像不會移動，而且看起來整個滾動過程能夠更加平滑。

由於昨天設置了一個自動轉動的實例，所以在想能不能做一個自動旋轉，看起來是360度旋轉的例子，答案是肯定的，不過試驗效果不好，因為只有包裝部分可以有360度圖片，

罐本身是沒有的；

點擊查看demo  抱歉 ，之前引用qq空間圖片地址，所以導致顯示錯誤，現已更新為淘寶地址（曾經也是c店店主），不知道大家有沒有好的服務器空間推薦。

總體思路跟過渡banner思路是一樣的，將圖片分成n張小圖（這里我省去了計算，所以直接1px一張圖片），每張圖片放在一個div里，通過backgrounc-position控制位置，當第一張超出屏幕外既將其追加到整個元素末尾，這樣就可以形成一個無限滾動的效果。

具體看代碼：

<div class="wrap">     
  <ul class="rotate" id="element"></ul>
  <div class="shadow"></div>
</div>

ul為包裝圖片圖層，li元素同一個背景，不同的位置，shadow里為遮罩圖片，只有中間位置為png透明可見，其他位置設置為白色。

css主要控制圖片位置

*{margin:0px;padding:0px}
.wrap{width:240px;height:440px;position:relative;margin:100px auto;overflow:hidden}
.shadow{position:absolute;width:100%;height:100%;background:url(http://a1.qpic.cn/psb?/V10AF8bZ2eGAgL/W62FFJKhTn6rUO3kfNS2vhhfU7lZCr0Pf.OW4L91yYg!/b/dBoBAAAAAAAA&bo=0gBQAQAAAAADB6E!&rf=viewer_4) center center no-repeat;}
.rotate{width:190px;height:100%;position:absolute;top:0px;margin-left:25px;left:}
img{display:block;margin:0px auto;margin-top:-80px}
li{list-style-type:none;float:left;width:1px;height:100%;}

通過jq來生成li元素，並做動畫

<script>
$(function(){
    var width=537;    
    for(i=0;i<width;i+=1){     
         $("ul").append('<li style="background:url(http://a1.qpic.cn/psb?/V10AF8bZ2eGAgL/TCmGRnzlj7iukRUhvLRKCeNG2k1GClSoeRz*lNNbkEw!/b/dBoBAAAAAAAA&bo=GQIYAQAAAAAFByY!&rf=viewer_4)  -'+ i + 'px  62px no-repeat"></li>')     
    };    
    function add(){
       $("ul").animate({left:"-=1px"},10,function(){
           $("ul").css({"left":"0px"}).find("li:first").appendTo($("ul"))   
        })    
    }
    setInterval(add,10)
})
</script>

 

如有問題及錯誤或者更好的解決辦法，請聯系我。

另自己新建立了一個qq群：85530789,歡迎志同道合的朋友一起多多交流技術