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

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

大概原理圖是這樣：

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

圖片分別如下：

???????

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

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

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

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

罐本身是沒有的；

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

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

具體看代碼：

1 <div class="wrap"> 3 <ul class="rotate" id="element"></ul> 4 <div class="shadow"></div> 5 </div>

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

css主要控制圖片位置

1 *{margin:0px;padding:0px} 2 .wrap{width:240px;height:440px;position:relative;margin:100px auto;overflow:hidden} 3 .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;} 4 .rotate{width:190px;height:100%;position:absolute;top:0px;margin-left:25px;left:} 5 img{display:block;margin:0px auto;margin-top:-80px} 6 li{list-style-type:none;float:left;width:1px;height:100%;}

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

1 <script> 2 $(function(){ 3 var width=537; 4 for(i=0;i<width;i+=1){ 5 $("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>') 6 }; 7 function add(){ 8 $("ul").animate({left:"-=1px"},10,function(){ 9 $("ul").css({"left":"0px"}).find("li:first").appendTo($("ul")) 10 }) 11 } 12 setInterval(add,10) 13 }) 14 </script>

?

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

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

?

轉載于:https://www.cnblogs.com/mopagunda/p/4683870.html

與50位技術專家面對面20年技術見證，附贈技術全景圖

總結

以上是生活随笔為你收集整理的js+css立体旋转的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。