[英]CSS div flip works first time only
每当单击按钮时,我都有一个div翻转。 每次单击时,都应前后切换。 它仅适用于首次点击。
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的新手。 请帮助我找到问题。
这是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>
这是一个工作的小提琴
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.