Использование CSS и JQuery, как я могу перевернуть div вертикально одной кнопкой и горизонтально с другой?

Question

Я работаю над веб-приложением с div, которые в настоящее время переворачиваются горизонтально и показывают изображение с одной стороны и сетку на другом. Это достигается нажатием на кнопку «(фактически другой div). Я бы хотел реализовать третью сторону, если потребуется, что позволяет пользователям вводить параметры. Эту третью сторону можно было бы получить, щелкнув другую «кнопку», и это приведет к тому, что диаграмма будет переворачиваться вертикально.

Мне удалось сделать эту работу по большей части. Я могу перевернуть в любом направлении просто отлично, если он только горизонтальный (div 1 в моем примере) или вертикальный (div 2). Однако, когда я объединяю их вместе в один и тот же div, анимация разбивается на горизонтальный флип (div 3). Он проходит только половину движения.

Моего пример HTML-код состоит из нескольких простой дивы:

<div id="one" class="flipper"> 
    <div class="front"> 
     <div class="hclick">Flip Me</div> 
    </div> 
    <div class="back"> 
     <div class="hclick">Flip Me</div> 
    </div> 
</div> 


<div id="two" class="vflipper"> 
    <div class="vfront"> 
     <div class="vclick">Flip Me</div> 
    </div> 
    <div class="vback"> 
     <div class="vclick">Flip Me</div> 
    </div> 
</div> 

<div id="three" class="flipper vflipper"> 
    <div class="front vfront"> 
     <div class="hclick">Flip Me</div> 
     <div class="vclick">Flip Me</div> 
    </div> 
    <div class="back"> 
     <div class="hclick">Flip Me</div> 
    </div> 
    <div class="vback"> 
     <div class="vclick">Flip Me</div> 
    </div> 

Вот мое отношение CSS:

.flipper, .vflipper { 
    position: absolute; 
    perspective: 600px; 
    -webkit-perspective: 600px; 
     -moz-perspective: 600px; 

} 

.flipper .front, .flipper .back, .vflipper .vfront, .vflipper .vback{ 
     -webkit-transform-style: preserve-3d; 
     -moz-transform-style: preserve-3d; 
      transform-style: preserve-3d; 
    -webkit-backface-visibility: hidden; 
     -moz-backface-visibility: hidden; 
      backface-visibility: hidden; 


    -o-transition: transform .6s ease-in-out; 
    -moz-transition: transform .6s ease-in-out; 
    -webkit-transition: transform .6s ease-in-out; 
    transition: transform .6s ease-in-out; 

} 

.flipper .front { 
    position: absolute; 
    top: 0px; 
    left: 0px; 
    z-index: 900; 
    width: inherit; 
    height: inherit; 
    -webkit-transform: rotateY(0deg); 
     -moz-transform: rotateY(0deg); 
      transform: rotateY(0deg); 
} 
.flipper.flip .front { 
    z-index: 900; 
    -webkit-transform: rotateY(180deg); 
    -moz-transform: rotateY(180deg); 
    transform: rotateY(180deg); 
} 
.flipper .back { 
    position: absolute; 
    top: 0px; 
    left: 0px; 
    z-index: 800; 
    width: inherit; 
    height: inherit; 
    -webkit-transform: rotateY(-180deg); 
    -moz-transform: rotateY(-180deg); 
    transform: rotateY(-180deg); 
} 
.flipper.flip .back { 
    z-index: 1000; 
    -webkit-transform: rotateY(0deg); 
    -moz-transform: rotateY(0deg); 
    transform: rotateY(0deg); 
} 


/* vertical flipping stuff */ 

.vflipper { 
    -webkit-transform-origin: 100% center; 
    -moz-transform-origin: 100% center; 
    -ms-transform-origin: 100% center; 
    transform-origin: 100% center; 
} 


.vflipper .vfront { 
    position: absolute; 
    top: 0px; 
    left: 0px; 
    z-index: 900; 
    width: inherit; 
    height: inherit; 
    -webkit-transform: rotateX(0deg); 
     -moz-transform: rotateX(0deg); 
      transform: rotateX(0deg); 
} 
.vflipper.vflip .vfront { 
    z-index: 900; 
    -webkit-transform: rotateX(180deg); 
    -moz-transform: rotateX(180deg); 
    transform: rotateX(180deg); 
} 
.vflipper .vback { 
    position: absolute; 
    top: 0px; 
    left: 0px; 
    z-index: 800; 
    width: inherit; 
    height: inherit; 
    -webkit-transform: rotateX(-180deg); 
    -moz-transform: rotateX(-180deg); 
    transform: rotateX(-180deg); 
} 
.vflipper.vflip .vback { 
    z-index: 1000; 
    -webkit-transform: rotateX(0deg); 
    -moz-transform: rotateX(0deg); 
    transform: rotateX(0deg); 
} 

У меня есть событие JQuery щелчка, который переключает класс флипа:

$(document).ready(function(){ 
    $('.hclick').click(function(){ 
     $(this).closest('.flipper').toggleClass('flip'); 
    }); 
    $('.vclick').click(function(){ 
     $(this).closest('.vflipper').toggleClass('vflip'); 
    }); 

Поскольку там какой-то конфликт, я попытался удалить противоположный класс с помощью jQuery перед Я добавил класс flip в div (четвертый div). Это привело к еще худшей анимации:

HTML:

<div id="four" class="flipper vflipper"> 
     <div class="front vfront"> 
      <div class="fix">Flip Me</div> 
      <div class="vfix">Flip Me</div> 
     </div> 
     <div class="back"> 
      <div class="fix">Flip Me</div> 
     </div> 
     <div class="vback"> 
      <div class="vfix">Flip Me</div> 
     </div> 
</div> 

JQuery:

$('.fix').click(function(){ 
    if($(this).closest('.flipper').hasClass('flip')) { 
     $(this).closest('.flipper').removeClass('flip').addClass('vflipper').find('.front').addClass('vfront'); 
      } else { 
       $(this).closest('.front').removeClass('vfront').closest('.flipper').removeClass('vflipper').addClass('flip'); 
      } 
     }); 
     $('.vfix').click(function(){ 
      if($(this).closest('.vflipper').hasClass('vflip')) { 
       $(this).closest('.vflipper').removeClass('vflip').addClass('flipper').find('.vfront').addClass('front'); 
      } else { 
       $(this).closest('.vfront').removeClass('front').closest('.vflipper').removeClass('flipper').addClass('vflip'); 
      } 
     }); 
    }); 

Я сколотить jsfiddle, чтобы показать свой прогресс до сих пор. https://jsfiddle.net/ckqde8up/1/

Есть ли способ заставить все это работать вместе? Любая помощь будет оценена. Заранее благодарим за то, что нашли время, чтобы прочитать все это.

Answer 1

Проблема, с которой вы сталкиваетесь, связана с тем, что свойство transform установлено в два раза. Когда вы установите его на rotateX(0deg) в .vflipper .vfront, вы переписываете rotateY(0deg) в .flipper .front (как и любое другое свойство CSS). Я думал, что настройка transform на rotateY(0deg) rotateX(0deg) исправит проблему (вы должны указать более одного преобразования), но это не так.

я все-таки удалось это исправить, удалив transform имущество от .flipper .front и .vflipper .vfront и поместить их в селекторов, где они не могут быть применены одновременно (с помощью :not псевдо-класс):

.flipper:not(.vflip){ 
    -webkit-transform: rotateY(0deg); 
     -moz-transform: rotateY(0deg); 
      transform: rotateY(0deg); 
} 

.flipper:not(.flip){ 
    -webkit-transform: rotateX(0deg); 
     -moz-transform: rotateX(0deg); 
      transform: rotateX(0deg); 
} 

Я также удалил fix Javascript, поскольку он не нужен.

Рабочую демонстрационную версию можно найти here (см. #three).