JS onClick преобразование повернуть горизонтальный вертикальный - PullRequest
Новая
       8

JS onClick преобразование повернуть горизонтальный вертикальный

0 голосов
/ 01 февраля 2019

Я хочу реализовать

обновление кнопка работает всегда в вертикальном направлении

и

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>

1 Ответ

0 голосов
/ 01 февраля 2019

У вас есть 4 случая для обработки.Во-первых, избавьтесь от встроенного CSS и давайте попробуем сделать это с добавлением / удалением класса (ов).

позволяет сделать 3 класса 

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

, теперь изменяем EventListeners updown и кнопки влево и вправо , как показано ниже 

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.

...