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 中国語 Web サイト で入手できます。フォローしてよく見てください~ 関連する推奨事項: CSS リップル アニメーション jquery ジェスチャ ロック解除ソース コード ネイティブ js は移動可能なプロンプト div ボックスのソース コードを実装します