Here is my code:
<html>
<head>
<meta charset="utf-8">
<style>
.fullCard,
.lowerHalfCard,
.upperHalfCard,
.fullCard-after,
.l… (閱讀更多)
Here is my code:
<html>
<head>
<meta charset="utf-8">
<style>
.fullCard,
.lowerHalfCard,
.upperHalfCard,
.fullCard-after,
.lowerHalfCard-after,
.upperHalfCard-after {
background-color: inherit;
border-radius: 10px;
height: 100%;
width: 100%;
position: absolute;
align-items: center;
display: flex;
justify-content: center;
vertical-align:middle;
}
.fullCard-after::after,
.upperHalfCard-after::after{
content: "";
display: block;
position: absolute;
height: 4px;
background-color: inherit;
width: 100%;
top: calc(50% - 2px);
}
.lowerHalfCard-after::after{
content: "";
display: block;
position: absolute;
height: 4px;
background-color: inherit;
width: 100%;
top: calc(50% - 2px);
}
.lowerHalfCard,
.lowerHalfCard-after{
clip-path: polygon(0% 50%, 100% 50%, 100% 100%, 0% 100%);
}
.upperHalfCard,
.upperHalfCard-after{
clip-path: polygon(0% 0%, 100% 0%, 100% 50%, 0% 50%);
}
.splitFlap {
background-color:black;
box-sizing: border-box;
border-radius: 10px;
width: 100px;
height: 150px;
position: relative;
}
.rotate0to90 {
animation-name: r0to90;
}
.rotate90to0 {
animation-name: r90to0;
}
.rotate0to_90 {
animation-name: r0to_90;
}
.rotate_90to0 {
animation-name: r_90to0;
}
.rotate0to90,
.rotate90to0,
.rotate0to_90,
.rotate_90to0 {
animation-duration: 0.3s;
animation-fill-mode: forwards;
}
@keyframes r0to90 {
from {
transform:rotateX(0deg);
}
to {
transform: rotateX(90deg);
}
}
@keyframes r90to0 {
from {
transform: rotateX(90deg);
}
to {
transform: rotateX(0deg);
}
}
@keyframes r0to_90 {
from {
transform: rotateX(0deg);
}
to {
transform: rotateX(-90deg);
}
}
@keyframes r_90to0 {
from {
transform: rotateX(-90deg);
}
to {
transform: rotateX(0deg);
}
}
.transform0to_90 {
transform: rotateX(-90deg);
}
.transform0to90 {
transform: rotateX(90deg);
}
.hide{
display:none
}
.zIndex2 {
z-index: 2;
}
.zIndex4 {
z-index: 4;
}
.zIndex10 {
z-index: 10;
}
.blue{
background-color: blue
}
.green{
background-color: green
}
.red{
background-color: red
}
.orange{
background-color: orange
}
</style>
<script>
let baseDiv,lowerDiv,middleDiv,upperDiv;
document.addEventListener("DOMContentLoaded",()=>{
baseDiv=document.getElementById("base");
lowerDiv=document.getElementById("lower");
middleDiv=document.getElementById("middle");
upperDiv=document.getElementById("upper");
});
let backward=()=>{
middleDiv.innerHTML=baseDiv.innerHTML;
lowerDiv.classList.add("rotate0to90");
middleDiv.className="upperHalfCard-after transform0to_90 zIndex4";
}
let forward=()=>{
middleDiv.innerHTML=baseDiv.innerHTML;
upperDiv.classList.add("rotate0to_90");
middleDiv.className="lowerHalfCard-after transform0to90 zIndex4";
}
let upperHandler=()=>{
middleDiv.classList.add("rotate90to0");
upperDiv.classList.replace("zIndex4","zIndex2");
}
let lowerHandler=()=>{
lowerDiv.classList.replace("zIndex4","zIndex2");
middleDiv.classList.add("rotate_90to0");
}
let middleHandler=()=>{
upperDiv.innerHTML=baseDiv.innerHTML;
lowerDiv.innerHTML=baseDiv.innerHTML;
middleDiv.className="hide";
upperDiv.className="upperHalfCard-after zIndex4";
lowerDiv.className="lowerHalfCard-after zIndex2";
}
</script>
</head>
<body>
<div class="splitFlap">
<div
id="base"
class="fullCard-after zIndex2">
<img src="img/1_100.png">
</div>
<div
class="upperHalfCard-after zIndex4"
id="upper"
onAnimationEnd="upperHandler()">
<img src="img/0_100.png">
</div>
<div
id="middle"
class="hide"
onAnimationEnd="middleHandler()">
</div>
<div
class="lowerHalfCard-after zIndex2"
id="lower"
onAnimationEnd="lowerHandler()">
<img src="img/0_100.png">
</div>
</div>
<p>
<button onClick="forward()">
+
</button>
<button onClick="backward()">
-
</button>
<button onClick="setHinge()">Set Hinge</button>
</p>
</body>
</html>
I am creating a split-flap. It works fine in Chrome, but in firefox, during the second rotation period, it is not smooth as in chrome. How can I fix it?
