CSS div flip работает только первый раз

У меня есть div, чтобы перевернуть каждый раз, когда я нажимаю кнопку. Каждый щелчок спереди и сзади должен переключаться. Он работает только для первого клика.CSS div flip работает только первый раз

my jsfiddle.

HTML:

<div style="margin-left:100px;padding-top:100px;"> 
    <div class="vertical flip-container"> 
     <div class="flipper" id='flipper'> 
      <div class="front"> 
       Front Side 
      </div> 
      <div class="back"> 
       Back Side 
      </div> 
     </div> 
    </div> 
    <button onclick="document.getElementById('flipper').style.transform = 'rotateX(-180deg)'">Tap the button</button> 
</div>

CSS:

/* entire container, keeps perspective */ 
.flip-container { 
    perspective: 400px; 
} 

.flip-container, .front, .back { 
    width: 220px; 
    height: 280px; 
} 

.back { 
    width: 220px; 
    height: 200px; 
} 

/* flip speed goes here */ 
.flipper { 
    transition: 0.6s; 
    transform-style: preserve-3d; 
    position: relative; 
} 

/* hide back of pane during swap */ 
.front, .back { 
    position: absolute; 
    top: 0; 
    left: 0; 
    backface-visibility:hidden; 
    -webkit-backface-visibility:hidden; 
} 

/* front pane, placed above back */ 
.front { 
    z-index: 1; 
    background-color:red; 
    animation: toBack 0.3s linear normal forwards; 
} 

/* back, initially hidden pane */ 
.back { 
    transform: rotateX(-180deg); 
    background-color:green; 
    animation: toFront 0.3s linear normal forwards; 
} 
.vertical.flip-container { 
    position: relative; 
} 

@keyframes toBack { 
    0% {z-index:0;} 
    100% {z-index:1;} 
} 
@keyframes toFront { 
    0% {z-index:1;} 
    100% {z-index:0;} 
} 
.vertical.flip-container .flipper { 
    transform-origin: 100% 100px; /* half of height */ 
}

Я новичок в CSS3. Пожалуйста, помогите мне найти проблему.

источник

2014-09-11 Gautam Kumar

Вы только когда-либо устанавливаете его на '-180' (после первого щелчка), как только он находится на' -180', он больше не будет перемещаться. Вам нужно, чтобы каждый раз добавлял еще 180 градусов или делал '-180' в первый раз, а' 0' второй и т. Д. И т. Д. – naththedeveloper

В дополнение к вышеприведенному комментарию лучше использовать класс CSS для преобразования и включения и выключения при каждом нажатии кнопки. – Harry

Вот решение с JQuery

Jquery:

$(document).ready(function() { 

    $("#rotate").click(
     function() { 
      $("#flipper").toggleClass("back"); 
     }    
    ); 
});

HTML (я только добавил идентификатор вашей кнопки)

<div style="margin-left:100px;padding-top:100px;"> 
    <div class="vertical flip-container"> 
     <div class="flipper" id='flipper'> 
      <div class="front">Front Side</div> 
     <div class="back">Back Side</div> 
    </div> 
</div> 
<button id="rotate">Tap the button</button>

nd здесь работает fiddle

источник

2014-09-11 17:09:31

CSS div flip работает только первый раз

ответ

Смежные вопросы