JS onClick变换旋转问题水平垂直

Question

我要实现

updown按钮总是垂直方向工作

和

leftRight 按钮始终在水平方向工作。从当前图像位置

但是在这里我的探针在第一次旋转后，如果我首先尝试从另一种方式旋转，它会移动到初始位置而不从该位置旋转。

$(document).on('click', '#choose_nail_reflect_side', function(e) {

        var items = $('#order_nail_img');
        var lengths = items.length;
        var index = 0;
        $("#order_nail_img").addClass('side');
        
   
        console.log($("#order_nail_img").css('transform'));


            if ($("#order_nail_img").css('transform') == 'none') {
              $("#order_nail_img").css({'transform': 'rotateY(-180deg)'});
            }
            else {
                $("#order_nail_img").css({'transform': ''});
            };
    });
    $(document).on('click', '#choose_nail_reflect_updown', function(e) {

        var items = $('#order_nail_img');
        var lengths = items.length;
        var index = 0;
        $("#order_nail_img").addClass('down');
      
            if ($("#order_nail_img").css('transform') == 'none') {
              $("#order_nail_img").css({'transform': 'rotateX(-180deg)'});
            } 
            else {
               $("#order_nail_img").css({'transform': ''});
            };
    });

#choose_nail_reflect_side {
   
    margin-top: 56px;
}
#choose_nail_reflect_updown {

}

#order_nail_img {
  -moz-transition: transform 1s;
  -webkit-transition: transform 1s;
  transition: transform 1s;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="thumbnail">
  <img id="order_nail_img" src="https://i.imgur.com/KA2dxD6.jpg" alt="">
</div>

<div class="btn  bgSalmon W150 aCenter" id="choose_nail_reflect_updown">
    <a href="javascript:void(0);">upDown</a>
</div>

<div class="btn  bgSalmon W150 aCenter" id="choose_nail_reflect_side">
    <a href="javascript:void(0);">leftRight</a>
</div>

Answer 1

您有 4 个案件需要处理。首先摆脱内联 css，让我们尝试通过添加/删除类来做到这一点。

让我们做 3 个类

.verticallyInverted {
    transform: rotateX(-180deg);
}
.horzontallyInverted{
    transform: rotateY(-180deg);
}
.allInverted {
    transform: rotate(-180deg);
}

现在修改updown和leftright按钮的eventListeners如下

var imageEl = $('#order_nail_img');    
function handleUpdownClick (){
      if(imageEl.hasClass("horizontallyInverted") {
          imageEl.removeClass("horizontallyInverted");
          imageEl.addClass("allInverted");
      } else if(imageEl.hasClass("verticallyInverted"){
          imageEl.removeClass("verticallyInverted");
      } else if(imageEl.hasClass("allInverted")) {
          imageEl.removeClass("allInverted");
          imageEl.addClass("horizontallyInverted");
      }
}


function handleLeftrightClick (){
          if(imageEl.hasClass("verticallyInverted") {
              imageEl.removeClass("verticallyInverted");
              imageEl.addClass("allInverted");
          } else if(imageEl.hasClass("horizontallyInverted"){
              imageEl.removeClass("horizontallyInverted");
          } else if(imageEl.hasClass("allInverted")) {
              imageEl.removeClass("allInverted");
              imageEl.addClass("verticallyInverted");
          }
}

我希望你的代码支持 jQuery。