JQuery：如何制作具有彎曲效果的3D游戲桿圖像？

Question

我正在制作需要3d操縱桿圖像的應用程序，以便用戶可以在其上滑動，並且圖像會沿滑動方向彎曲。

對於向下滑動或向上滑動事件，我應賦予CSS或動畫效果以使圖像向下或向上移動？

我不知道最好的方法。 我正在嘗試此代碼：-

 <div style="width:220px;height:220px;background-color:black;display:table-cell; vertical-align:middle; text-align:center" id="joy_div">
        <img id="joystick" src="joystick.png" >
</div>

<script>
$("#joy_div").rotate({ 
    bind: 
    { 
        swipeleft : function() { 
            $("#joystick").rotate({animateTo:-50});
        },
        swiperight : function() { 
            $("#joystick").rotate({animateTo:50});
        },
        swipeup : function(){
            alert('up');
        },
        swipedown : function(){
            alert('down');
        },
        swipeend : function(){
            $("#joystick").rotate({animateTo:0});
        }
    }); 
</script>

我感謝任何指導。

Answer 1

我建議您使用CSS transform和perspective來執行此操作。

在下面的示例中，我已使用swipeLeft，swipeRight，swipeUp和swipeDown事件的按鈕進行了演示。

 $(".tilt").click(function() { $('#joystick').removeAttr('class'); $('#joystick').addClass($(this).attr('id')); }); 

 #joy_div { perspective: 500px; } button { margin: 10px 0 0 0; } .left, .right, .down, .up, .reset { transition: transform 0.5s ease; transform-origin: 50% 50%; } .left { transform: rotateY(-40deg); } .right { transform: rotateY(40deg); } .up { transform: rotateX(-40deg); } .down { transform: rotateX(40deg); } .reset { transform: rotateX(0) rotateY(0); } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <div style="width:250px;height:160px;display:table-cell; vertical-align:middle; text-align:center" id="joy_div"> <img id="joystick" width="250" height="160" src="http://help.robotc.net/WebHelpArduino/scr/TETRIX_MATRIX_New/NXT_Using_Joysticks_files/Joystick_front.gif" /> </div> <button class="tilt" id="left">swipeleft</button> <button class="tilt" id="right">swiperight</button> <button class="tilt" id="up">swipeup</button> <button class="tilt" id="down">swipedown</button> <button class="tilt" id="reset">Reset</button> 

Answer 2

像這樣嗎 （盡管這是一個非常粗糙的設計，並且沒有完全實現）

 $('#left').click(function(){ $('.stick').removeClass("right").toggleClass("left"); }); $('#right').click(function(){ $('.stick').removeClass("left").toggleClass("right"); }); 

 .wrapper{ width:300px; height:300px; background:gray; } .stick{ height:30px; width:30px; border-radius:50%; background:red; margin:0 auto; position:relative; z-index:5; } .stick:after{ content:""; position:absolute; height:200px; width:20px; background:red; bottom:-180px; left:15%; z-index:2; } .joy{ height:30px; width:100%; background:darkgray; margin-top:170px; position:relative; z-index:20; } .left{ transform:rotate(-20deg); left:-50px; } .right{ transform:rotate(20deg); left:50px; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="wrapper"> <div class="stick"></div> <div class="joy"></div> </div> <button id="left">left</button> <button id="right">right</button> 

至於“向上”和“向下”運動，您可能需要研究3d透視圖css屬性。

---

如果您能夠使用SCSS，則可能需要查看以下內容：

• 此操縱桿實現

如果不是這樣的話，我認為這樣也會有所幫助

不可思議的實施例〜 SOURCE沒有以ME

---

 * { padding: 0; margin: 0; } html , body { width: 100%; height: 100%: overflow: hidden; position: fixed; top: 0%; left: 0%; } html { background-color: rgba(240,255,255,1); } #letter { font-size: 120px; font-family: Helvetica; font-weight: Bold; color: rgba(18,22,26,0.7); width: 120px; height: 120px; text-align: center; vertical-align: middle; line-height: 120px; position: fixed; top: 50%; left: 50%; margin-top: -60px; margin-left: -60px; opacity: 1; z-index: -1; } #description { position: fixed; bottom: 10px; width: 100%; z-index: 100; font-family: Helvetica; font-weight: 200; color: rgba(18,22,26,0.7); text-align: center; font-size: 11px; letter-spacing: 1px; } #animation { position: fixed; width: 100%; height: 100%; top: 0%; left: 0%; z-index: 1; } .base { width: 170px; height: 30px; position: absolute; top: 50%; left: 50%; margin-left: -85px; margin-top: 95px; background-color: rgba(123,126,129,1); z-index: -1; } .base:after { border-bottom: 40px solid rgba(193,196,199,1); border-right: 20px solid transparent; border-left: 20px solid transparent; position: absolute; top: -85px; left: 0px; width: 130px; height: 45px; content: ""; } .button { width: 16px; height: 35px; background-color: rgba(23,26,29,0.5); position: absolute; top: 50%; left: 50%; -webkit-transform-origin: center bottom; transform-origin: center bottom; -webkit-transform: scale( 1 , 0.35 ); -moz-transform: scale( 1 , 0.35 ); -ms-transform: scale( 1 , 0.35 ); -o-transform: scale( 1 , 0.35 ); transform: scale( 1 , 0.35 ); border-radius: 10px; } .button:after { content: ""; width: 16px; height: 16px; position: absolute; top: 0; left: 0; background-color: rgba(255,115,110,1); border-radius: 20px; } #animation .button:nth-of-type(1) { margin-top: 50px; margin-left: 30px; animation: baseButton 6s ease 0s infinite alternate none; -webkit-animation: baseButton 6s ease 0s infinite alternate none; } #animation .button:nth-of-type(2) { margin-top: 55px; margin-left: 50px; animation: baseButton 6.5s ease 2s infinite alternate none; -webkit-animation: baseButton 6.5s ease 2s infinite alternate none; } .stick { background-color: rgba(123,126,129,1); width: 22px; height: 100px; position: absolute; top: 50%; left: 50%; margin-left: -11px; margin-top: -65px; z-index: 10; -webkit-transform-origin: center 180px; transform-origin: center 180px; animation: stick 7s ease-in-out 0s infinite alternate none; -webkit-animation: stick 7s ease-in-out 0s infinite alternate none; } .stick:after { -webkit-transform: scale( 1 , 0.25 ); -moz-transform: scale( 1 , 0.25 ); -ms-transform: scale( 1 , 0.25 ); -o-transform: scale( 1 , 0.25 ); transform: scale( 1 , 0.25 ); background-color: rgba(193,196,199,1); border-radius: 34px; position: absolute; top: -11px; left: 0; width: 22px; height: 22px; content: ""; } .stick:before { -webkit-transform: scale( 1 , 0.35 ); -moz-transform: scale( 1 , 0.35 ); -ms-transform: scale( 1 , 0.35 ); -o-transform: scale( 1 , 0.35 ); transform: scale( 1 , 0.35 ); background-color: rgba(123,126,129,1); border-radius: 34px; position: absolute; top: 90px; left: 0; width: 22px; height: 22px; content: ""; } .stick .topButton { width: 16px; height: 35px; background-color: rgba(103,106,109,1); position: absolute; top: 0%; left: 0%; -webkit-transform-origin: center bottom; transform-origin: center bottom; -webkit-transform: scale( 1 , 0.25 ); -moz-transform: scale( 1 , 0.25 ); -ms-transform: scale( 1 , 0.25 ); -o-transform: scale( 1 , 0.25 ); transform: scale( 1 , 0.25 ); border-radius: 10px; margin-left: 3px; margin-top: -34px; z-index: 20; animation: baseButton 3.5s ease -2s infinite alternate forwards; -webkit-animation: baseButton 3.5s ease -2s infinite alternate forwards; } .stick .topButton:after { content: ""; width: 16px; height: 16px; position: absolute; top: 0; left: 0; background-color: rgba(255,115,110,1); border-radius: 20px; } .stick .bottom { -webkit-transform: scale( 1 , 0.55 ); -moz-transform: scale( 1 , 0.55 ); -ms-transform: scale( 1 , 0.55 ); -o-transform: scale( 1 , 0.55 ); transform: scale( 1 , 0.55 ); width: 16px; height: 35px; border-radius: 20px; position: absolute; bottom: -25px; left: 3px; z-index: -1; background-color: rgba(83,86,89,1); } .stick .support { width: 40px; height: 40px; position: absolute; bottom: -41px; left: -9px; background-color: rgba(48,50,54,1); border-radius: 80px; -webkit-transform: scale( 1 , 0.45 ); -moz-transform: scale( 1 , 0.45 ); -ms-transform: scale( 1 , 0.45 ); -o-transform: scale( 1 , 0.45 ); transform: scale( 1 , 0.45 ); z-index: -5; } .rubber { position: absolute; width: 80px; height: 80px; top: 50%; left: 50%; margin-left: -40px; margin-top: 25px; background-color: rgba(38,42,46,1); border-radius: 80px; -webkit-transform: scale( 1 , 0.35 ); -moz-transform: scale( 1 , 0.35 ); -ms-transform: scale( 1 , 0.35 ); -o-transform: scale( 1 , 0.35 ); transform: scale( 1 , 0.35 ); z-index: 1; } .cord { border-top: 3px solid rgba(38,42,46,1); border-left: 3px solid rgba(38,42,46,1); border-top-left-radius: 40px; width: 30%; height: 20px; position: absolute; margin-top: 80px; top: 50%; left: 20%; z-index: -20; } .wallcord { border-bottom: 3px solid rgba(38,42,46,1); border-right: 3px solid rgba(38,42,46,1); border-bottom-right-radius: 40px; width: 20%; height: 60px; position: absolute; margin-top: 100px; top: 50%; left: 0%; z-index: -20; } @keyframes baseButton { 64% { -webkit-transform: scale( 1 , 0.35 ); -moz-transform: scale( 1 , 0.35 ); -ms-transform: scale( 1 , 0.35 ); -o-transform: scale( 1 , 0.35 ); transform: scale( 1 , 0.35 );} 62% { -webkit-transform: scale( 1 , 0.15 ); -moz-transform: scale( 1 , 0.15 ); -ms-transform: scale( 1 , 0.15 ); -o-transform: scale( 1 , 0.15 ); transform: scale( 1 , 0.15 );} 60% { -webkit-transform: scale( 1 , 0.35 ); -moz-transform: scale( 1 , 0.35 ); -ms-transform: scale( 1 , 0.35 ); -o-transform: scale( 1 , 0.35 ); transform: scale( 1 , 0.35 );} 100% { -webkit-transform: scale( 1 , 0.15 ); -moz-transform: scale( 1 , 0.15 ); -ms-transform: scale( 1 , 0.15 ); -o-transform: scale( 1 , 0.15 ); transform: scale( 1 , 0.15 );} 18% { -webkit-transform: scale( 1 , 0.35 ); -moz-transform: scale( 1 , 0.35 ); -ms-transform: scale( 1 , 0.35 ); -o-transform: scale( 1 , 0.35 ); transform: scale( 1 , 0.35 );} 16% { -webkit-transform: scale( 1 , 0.15 ); -moz-transform: scale( 1 , 0.15 ); -ms-transform: scale( 1 , 0.15 ); -o-transform: scale( 1 , 0.15 ); transform: scale( 1 , 0.15 );} 0% { -webkit-transform: scale( 1 , 0.35 ); -moz-transform: scale( 1 , 0.35 ); -ms-transform: scale( 1 , 0.35 ); -o-transform: scale( 1 , 0.35 ); transform: scale( 1 , 0.35 );} 98% { -webkit-transform: scale( 1 , 0.35 ); -moz-transform: scale( 1 , 0.35 ); -ms-transform: scale( 1 , 0.35 ); -o-transform: scale( 1 , 0.35 ); transform: scale( 1 , 0.35 );} 14% { -webkit-transform: scale( 1 , 0.35 ); -moz-transform: scale( 1 , 0.35 ); -ms-transform: scale( 1 , 0.35 ); -o-transform: scale( 1 , 0.35 ); transform: scale( 1 , 0.35 );} 10% { -webkit-transform: scale( 1 , 0.35 ); -moz-transform: scale( 1 , 0.35 ); -ms-transform: scale( 1 , 0.35 ); -o-transform: scale( 1 , 0.35 ); transform: scale( 1 , 0.35 );} 12% { -webkit-transform: scale( 1 , 0.15 ); -moz-transform: scale( 1 , 0.15 ); -ms-transform: scale( 1 , 0.15 ); -o-transform: scale( 1 , 0.15 ); transform: scale( 1 , 0.15 );} } @-webkit-keyframes baseButton { 64% { -webkit-transform: scale( 1 , 0.35 ); -moz-transform: scale( 1 , 0.35 ); -ms-transform: scale( 1 , 0.35 ); -o-transform: scale( 1 , 0.35 ); transform: scale( 1 , 0.35 );} 62% { -webkit-transform: scale( 1 , 0.15 ); -moz-transform: scale( 1 , 0.15 ); -ms-transform: scale( 1 , 0.15 ); -o-transform: scale( 1 , 0.15 ); transform: scale( 1 , 0.15 );} 60% { -webkit-transform: scale( 1 , 0.35 ); -moz-transform: scale( 1 , 0.35 ); -ms-transform: scale( 1 , 0.35 ); -o-transform: scale( 1 , 0.35 ); transform: scale( 1 , 0.35 );} 100% { -webkit-transform: scale( 1 , 0.15 ); -moz-transform: scale( 1 , 0.15 ); -ms-transform: scale( 1 , 0.15 ); -o-transform: scale( 1 , 0.15 ); transform: scale( 1 , 0.15 );} 18% { -webkit-transform: scale( 1 , 0.35 ); -moz-transform: scale( 1 , 0.35 ); -ms-transform: scale( 1 , 0.35 ); -o-transform: scale( 1 , 0.35 ); transform: scale( 1 , 0.35 );} 16% { -webkit-transform: scale( 1 , 0.15 ); -moz-transform: scale( 1 , 0.15 ); -ms-transform: scale( 1 , 0.15 ); -o-transform: scale( 1 , 0.15 ); transform: scale( 1 , 0.15 );} 0% { -webkit-transform: scale( 1 , 0.35 ); -moz-transform: scale( 1 , 0.35 ); -ms-transform: scale( 1 , 0.35 ); -o-transform: scale( 1 , 0.35 ); transform: scale( 1 , 0.35 );} 98% { -webkit-transform: scale( 1 , 0.35 ); -moz-transform: scale( 1 , 0.35 ); -ms-transform: scale( 1 , 0.35 ); -o-transform: scale( 1 , 0.35 ); transform: scale( 1 , 0.35 );} 14% { -webkit-transform: scale( 1 , 0.35 ); -moz-transform: scale( 1 , 0.35 ); -ms-transform: scale( 1 , 0.35 ); -o-transform: scale( 1 , 0.35 ); transform: scale( 1 , 0.35 );} 10% { -webkit-transform: scale( 1 , 0.35 ); -moz-transform: scale( 1 , 0.35 ); -ms-transform: scale( 1 , 0.35 ); -o-transform: scale( 1 , 0.35 ); transform: scale( 1 , 0.35 );} 12% { -webkit-transform: scale( 1 , 0.15 ); -moz-transform: scale( 1 , 0.15 ); -ms-transform: scale( 1 , 0.15 ); -o-transform: scale( 1 , 0.15 ); transform: scale( 1 , 0.15 );} } @keyframes stick { 5% { -webkit-transform: rotate( 20deg ); -moz-transform: rotate( 20deg ); -ms-transform: rotate( 20deg ); -o-transform: rotate( 20deg ); transform: rotate( 20deg );} 100% { -webkit-transform: rotate( -5deg ); -moz-transform: rotate( -5deg ); -ms-transform: rotate( -5deg ); -o-transform: rotate( -5deg ); transform: rotate( -5deg );} 97% { -webkit-transform: rotate( 20deg ); -moz-transform: rotate( 20deg ); -ms-transform: rotate( 20deg ); -o-transform: rotate( 20deg ); transform: rotate( 20deg );} 94% { -webkit-transform: rotate( 0deg ); -moz-transform: rotate( 0deg ); -ms-transform: rotate( 0deg ); -o-transform: rotate( 0deg ); transform: rotate( 0deg );} 87% { -webkit-transform: rotate( -5deg ); -moz-transform: rotate( -5deg ); -ms-transform: rotate( -5deg ); -o-transform: rotate( -5deg ); transform: rotate( -5deg );} 84% { -webkit-transform: rotate( 20deg ); -moz-transform: rotate( 20deg ); -ms-transform: rotate( 20deg ); -o-transform: rotate( 20deg ); transform: rotate( 20deg );} 82% { -webkit-transform: rotate( 5deg ); -moz-transform: rotate( 5deg ); -ms-transform: rotate( 5deg ); -o-transform: rotate( 5deg ); transform: rotate( 5deg );} 74% { -webkit-transform: rotate( 5deg ); -moz-transform: rotate( 5deg ); -ms-transform: rotate( 5deg ); -o-transform: rotate( 5deg ); transform: rotate( 5deg );} 68% { -webkit-transform: rotate( -20deg ); -moz-transform: rotate( -20deg ); -ms-transform: rotate( -20deg ); -o-transform: rotate( -20deg ); transform: rotate( -20deg );} 65% { -webkit-transform: rotate( 0deg ); -moz-transform: rotate( 0deg ); -ms-transform: rotate( 0deg ); -o-transform: rotate( 0deg ); transform: rotate( 0deg );} 53% { -webkit-transform: rotate( 6deg ); -moz-transform: rotate( 6deg ); -ms-transform: rotate( 6deg ); -o-transform: rotate( 6deg ); transform: rotate( 6deg );} 50% { -webkit-transform: rotate( 10deg ); -moz-transform: rotate( 10deg ); -ms-transform: rotate( 10deg ); -o-transform: rotate( 10deg ); transform: rotate( 10deg );} 48% { -webkit-transform: rotate( -5deg ); -moz-transform: rotate( -5deg ); -ms-transform: rotate( -5deg ); -o-transform: rotate( -5deg ); transform: rotate( -5deg );} 47% { -webkit-transform: rotate( 0deg ); -moz-transform: rotate( 0deg ); -ms-transform: rotate( 0deg ); -o-transform: rotate( 0deg ); transform: rotate( 0deg );} 42% { -webkit-transform: rotate( -15deg ); -moz-transform: rotate( -15deg ); -ms-transform: rotate( -15deg ); -o-transform: rotate( -15deg ); transform: rotate( -15deg );} 40% { -webkit-transform: rotate( 0deg ); -moz-transform: rotate( 0deg ); -ms-transform: rotate( 0deg ); -o-transform: rotate( 0deg ); transform: rotate( 0deg );} 33% { -webkit-transform: rotate( 0deg ); -moz-transform: rotate( 0deg ); -ms-transform: rotate( 0deg ); -o-transform: rotate( 0deg ); transform: rotate( 0deg );} 22% { -webkit-transform: rotate( 10deg ); -moz-transform: rotate( 10deg ); -ms-transform: rotate( 10deg ); -o-transform: rotate( 10deg ); transform: rotate( 10deg );} 17% { -webkit-transform: rotate( 0deg ); -moz-transform: rotate( 0deg ); -ms-transform: rotate( 0deg ); -o-transform: rotate( 0deg ); transform: rotate( 0deg );} 0% { -webkit-transform: rotate( -5deg ); -moz-transform: rotate( -5deg ); -ms-transform: rotate( -5deg ); -o-transform: rotate( -5deg ); transform: rotate( -5deg );} } @-webkit-keyframes stick { 5% { -webkit-transform: rotate( 20deg ); -moz-transform: rotate( 20deg ); -ms-transform: rotate( 20deg ); -o-transform: rotate( 20deg ); transform: rotate( 20deg );} 100% { -webkit-transform: rotate( -5deg ); -moz-transform: rotate( -5deg ); -ms-transform: rotate( -5deg ); -o-transform: rotate( -5deg ); transform: rotate( -5deg );} 97% { -webkit-transform: rotate( 20deg ); -moz-transform: rotate( 20deg ); -ms-transform: rotate( 20deg ); -o-transform: rotate( 20deg ); transform: rotate( 20deg );} 94% { -webkit-transform: rotate( 0deg ); -moz-transform: rotate( 0deg ); -ms-transform: rotate( 0deg ); -o-transform: rotate( 0deg ); transform: rotate( 0deg );} 87% { -webkit-transform: rotate( -5deg ); -moz-transform: rotate( -5deg ); -ms-transform: rotate( -5deg ); -o-transform: rotate( -5deg ); transform: rotate( -5deg );} 84% { -webkit-transform: rotate( 20deg ); -moz-transform: rotate( 20deg ); -ms-transform: rotate( 20deg ); -o-transform: rotate( 20deg ); transform: rotate( 20deg );} 82% { -webkit-transform: rotate( 5deg ); -moz-transform: rotate( 5deg ); -ms-transform: rotate( 5deg ); -o-transform: rotate( 5deg ); transform: rotate( 5deg );} 74% { -webkit-transform: rotate( 5deg ); -moz-transform: rotate( 5deg ); -ms-transform: rotate( 5deg ); -o-transform: rotate( 5deg ); transform: rotate( 5deg );} 68% { -webkit-transform: rotate( -20deg ); -moz-transform: rotate( -20deg ); -ms-transform: rotate( -20deg ); -o-transform: rotate( -20deg ); transform: rotate( -20deg );} 65% { -webkit-transform: rotate( 0deg ); -moz-transform: rotate( 0deg ); -ms-transform: rotate( 0deg ); -o-transform: rotate( 0deg ); transform: rotate( 0deg );} 53% { -webkit-transform: rotate( 6deg ); -moz-transform: rotate( 6deg ); -ms-transform: rotate( 6deg ); -o-transform: rotate( 6deg ); transform: rotate( 6deg );} 50% { -webkit-transform: rotate( 10deg ); -moz-transform: rotate( 10deg ); -ms-transform: rotate( 10deg ); -o-transform: rotate( 10deg ); transform: rotate( 10deg );} 48% { -webkit-transform: rotate( -5deg ); -moz-transform: rotate( -5deg ); -ms-transform: rotate( -5deg ); -o-transform: rotate( -5deg ); transform: rotate( -5deg );} 47% { -webkit-transform: rotate( 0deg ); -moz-transform: rotate( 0deg ); -ms-transform: rotate( 0deg ); -o-transform: rotate( 0deg ); transform: rotate( 0deg );} 42% { -webkit-transform: rotate( -15deg ); -moz-transform: rotate( -15deg ); -ms-transform: rotate( -15deg ); -o-transform: rotate( -15deg ); transform: rotate( -15deg );} 40% { -webkit-transform: rotate( 0deg ); -moz-transform: rotate( 0deg ); -ms-transform: rotate( 0deg ); -o-transform: rotate( 0deg ); transform: rotate( 0deg );} 33% { -webkit-transform: rotate( 0deg ); -moz-transform: rotate( 0deg ); -ms-transform: rotate( 0deg ); -o-transform: rotate( 0deg ); transform: rotate( 0deg );} 22% { -webkit-transform: rotate( 10deg ); -moz-transform: rotate( 10deg ); -ms-transform: rotate( 10deg ); -o-transform: rotate( 10deg ); transform: rotate( 10deg );} 17% { -webkit-transform: rotate( 0deg ); -moz-transform: rotate( 0deg ); -ms-transform: rotate( 0deg ); -o-transform: rotate( 0deg ); transform: rotate( 0deg );} 0% { -webkit-transform: rotate( -5deg ); -moz-transform: rotate( -5deg ); -ms-transform: rotate( -5deg ); -o-transform: rotate( -5deg ); transform: rotate( -5deg );} } 

 <div id="letter">J</div> <div id="description">is for Joystick</div> <div id="animation"> <div class="button"></div> <div class="button"></div> <div class="stick"> <div class="topButton"></div> <div class="bottom"></div> <div class="support"></div> </div> <div class="rubber"></div> <div class="base"></div> <div class="cord"></div> <div class="wallcord"></div> </div>