一個用css和jquery實現的3d立體旋轉，免費提供原始碼~~可以供您研究哦~~ 程式碼：# PHP中文网 *{margin: 0;padding: 0;} ul,li{list-style: none;} #box { width: 800px; height: 360px; position: relative; margin: 100px auto; perspective: 800px; perspective-origin: right; border: 1px solid #ccc; } #inner { width: 10px; height: 360px; transform-style: preserve-3d; float: left; transform: rotateX(0deg); transform-origin: 50% 50% -180px; } #inner li { width: 10px; height: 360px; position: absolute; } #inner li:nth-child(1) { background:yellow; } #inner li:nth-child(2) { background: green; perspective-origin: bottom; transform: rotateX(90deg); top:-360px; transform-origin: bottom; background: red; } #inner li:nth-child(3) { background: blue; transform: translateZ(-360px) rotateX(180deg) translateY(360px); background:blue; transform-origin:bottom; } #inner li:nth-child(4) { background: yellow; top:360px; transform: rotateX(-90deg); transform-origin: top; background:green; } #btn{margin: 0 auto;border: 1px solid #f00;width: 800px; height: 60px;} #btn input{width: 40px;height: 30px;background: #ccc;} for(var i=0;i<=78;i++){ $("#box").append($("#inner").clone(true)) } for(var k=0;k<=80;k++){ $("#box ul").eq(k).children().css("background-position",-10*k+"px") } $("#btn input").click(function(){ for(var j=0;j<=80;j++){ $("#box ul").eq(j).css("transition",300+j*100+"ms") $("#box ul").css("transform","rotateX("+90*$(this).index()+"deg)") } }) 登入後複製免費拿去研究吧！更多好的源碼盡在PHP中文網，關注我們給你好看哦~ 相關推薦： css波紋動畫 jquery實作手勢解鎖原始碼 原生js實作可移動的提示div框源碼
