javascript - JQuery:如何制作具有 flex 效果的 3D Joystick 图像？

Question

我正在制作一个应用程序，我需要 3d 操纵杆图像，以便用户可以在其上滑动，图像将在滑动方向 flex 。

对于向下滑动或向上滑动事件，我应该提供什么 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>