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