javascript - JS onClick transform 旋转问题水平垂直

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按钮的eventListener如下

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。