Question

我有一个gif我用作精灵，移动到按键按下。他面朝左边，我想向右（右侧）反射他。我该怎么做呢？我想有2个css课程，并尝试切换它们但没有发生任何事情。

HTML

 <div class="sprite"><img src="https://media.giphy.com/media/iPuggAost1xde/giphy.gif" height="55" width="50" /></div>

CSS

.sprite {
      position: absolute;
      top: 48px;
      left: 540px;
      width: 50px;
      height: 50px;
      } 

  .sprite2 {
     position: absolute;
      top: 48px;
      left: 540px;
      width: 50px;
      height: 50px;
    //reflect 
    -moz-transform: scaleX(-1);
    -webkit-transform: scaleX(-1);
    -o-transform: scaleX(-1);
    transform: scaleX(-1);
    -ms-filter: fliph; 
    filter: fliph;
  }

JS

    $(document).ready(function() {

    $(document).keydown(function(key) {
        switch(key.which) {

            // a
            case 65:
                $(".sprite").animate({left: "-=10px"}, 'fast');
                break;

            // w
            case    87:
                $(".sprite").animate({top: "-=10px"}, 'fast');
                break;

            // d
            case 68:        
                $(".sprite").animate({left: "+=10px"}, 'fast');
        break;

            // s
            case 83:
                $(".sprite").animate({top: "+=10px"}, 'fast');
                break;
        }
    });
});

Answer 1

我不熟悉jQuery，但经过一番搜索后，我最终得到了一个可行的解决方案：

增加了2个课程：

.right-img {
    -moz-transform: scaleX(-1);
    -o-transform: scaleX(-1);
    -webkit-transform: scaleX(-1);
    transform: scaleX(-1);
    filter: FlipH;
    -ms-filter: "FlipH";
}

.left-img {
    -moz-transform: scaleX(1);
    -o-transform: scaleX(1);
    -webkit-transform: scaleX(1);
    transform: scaleX(1);
}

添加/删除相应的按钮：

$("img").removeClass("left-img");
$("img").addClass("right-img");

Fiddle

在keydown保持位置反映可移动元素

1 个答案: