纯 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,欢迎志同道合的朋友一起多多交流技术