css动画无反向翻转

我希望重复旋转我的元素，而不进行反向翻转。当我第一次调用我的函数时，它将是rotateX（'180deg'），第二次调用时，它将是rotateX（'360deg'），但当我第三次调用时，它的问题将是backflip，所以有没有想法让这个翻转保持向前而不反向翻转

函数myFunction（）{
if（document.getElementById（“front”）.style.transform==“document.getElementById（“front”）.style.transform==“rotateX（0deg）”）{
document.getElementById（“front”）.style.transform=“rotateX（180度）”；
document.getElementById（“back”）.style.transform=“rotateX（0deg）”；
}else if（document.getElementById（“front”）.style.transform==“rotateX（180度）”）{
document.getElementById（“front”）.style.transform=“rotateX（360deg）”；
document.getElementById（“back”）.style.transform=“rotateX（180度）”；
}否则{
document.getElementById（“front”）.style.transform=“”；
document.getElementById（“back”）.style.transform=“rotateX（-180deg）”；
}
}

.flipcard{
位置：相对位置；
宽度：220px；
高度：160px；
透视图：500px；
}
.flipcard.h.back{
变换：rotateX（-180度）；
}
.flipcard.正面，
.flipcard.背面{
位置：绝对位置；
宽度：100%；
身高：100%；
框大小：边框框；
过渡：所有0.5s的轻松过渡；
颜色：白色；
背景色：#000；
填充：10px；
背面可见性：隐藏；
}

这是正面
这是背面
翻转图像

您可以执行以下操作：

$（'#btnClick'）。单击（函数（）{
$（'.flip container'）.toggleClass（“fliped”）；
});
.flip-container.flipped.flipper{
-webkit变换：rotateX（180度）；
-moz变换：rotateX（180度）；
-o变换：旋转（180度）；
变换：rotateX（180度）；
位置：相对位置；
}
.翻转容器，
.前线，
.回来{
宽度：200px；
高度：200px；
}
.翻转容器{
-webkit透视图：1000；
-莫兹透视图：1000；
-o型透视图：1000；
前景：500；
光标：指针；
排名：0；
宽度：200px；
高度：200px；
}
.翻转容器。向后{
变换：rotateX（-180度）；
背景色：#000；
}
.鳍状肢{
-webkit转换：0.6s；
-webkit变换样式：保留-3d；
-moz跃迁：0.6s；
-moz变换样式：preserve-3d；
-o-转变：0.6s；
-o变换样式：preserve-3d；
过渡：0.6s；
变换样式：保留-3d；
位置：相对位置；
宽度：200px；
高度：200px；
显示：块；
}
.翻转容器。正面，
.翻转容器。向后{
位置：绝对位置；
宽度：100%；
身高：100%；
框大小：边框框；
过渡：所有0.6秒都容易进入；
颜色：白色；
背景色：#000；
填充：10px；
背面可见性：隐藏；
}

这是正面

这是背面

翻转图像
简化DOM、简化JS和优化CSS

这是制作旋转卡片的最佳方法：


var-card=document.querySelector（'.card'）；
card.addEventListener（'click'，function（）{
card.classList.toggle（'is-fliped'）；
});
body{font-family:sans-serif；}
.卡片{
位置：相对位置；
光标：指针；
变换样式：保留-3d；
变换原点：中间偏右；
转变：转变1s；
宽度：200px；
高度：260px；
边框：1px实心#CCC；
利润率：40px0；
透视图：600px；
}
.卡片翻了{
变换：rotateX（-180度）；
}
.card___面{
位置：绝对位置；
宽度：100%；
身高：100%；
线高：260px；
颜色：白色；
文本对齐：居中；
字体大小：粗体；
字体大小：40px；
背面可见性：隐藏；
}
.card___面-正面{
背景：红色；
}
.card___面–背面{
背景：蓝色；
变换：rotateX（180度）；
}

前面
返回