CSS与易拉罐3D滚动效果实例页面

展示

代码

CSS代码：

.coke_box{width:510px; height:400px; overflow:auto;}
.coke_box_in{width:660px; padding-left:300px;}
.coke_box_in p{width:1px; height:336px; background:url(../image/coke_bg.jpg) repeat-x fixed 0 0; float:left;}
#x1{background-position:5px 30px;}
#x2{background-position:0px 30px;}
#x3{background-position:-3px 30px;}
.
.
.
#x54{background-position:-68px 30px;}
#x55{background-position:-74px 30px;}
.coke_box_in img{margin-top:10px; border:solid white; margin-left:-172px; border-right-width:300px;}
            

HTML代码：

<div class="coke_box">
    <div class="coke_box_in">
        <div id="appendHTML">
            <script type="text/javascript">
                var oAppend = document.getElementById("appendHTML");
                var appendHtml = "";
                for(var i=1; i<=55; i+=1){
                    appendHtml += '<p id="x'+i+'"></p>';	
                }
                oAppend.innerHTML = appendHtml;
            </script>
        </div>
        <img src="../image/coke_can.png" />
    </div>
</div>