javascript - CSS div flip 仅在第一次工作

Question

每当我单击一个按钮时，我都会有一个 div 来翻转。每次单击前后应切换。它仅适用于第一次点击。

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 的新手。请帮我找出问题所在。

Answer 1

这里是jQuery的解决方案

Jquery:

$(document).ready(function () {

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

HTML(我只给你的按钮添加了一个 ID)

<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>

这是一个有效的 fiddle