Css Rotate卡在鼠标指针所在的位置

我想在CSS中制作一个动画，在一个元素上，它应该360度翻转并显示它的另一面

我使用了

动画：sparkred linear.5s

然后使用

@keyframes

在0%和100%设置动画，但动画在鼠标悬停的位置卡住。 我还尝试了

transition:transform

的方法（它在小提琴中被注释），但效果几乎相同。 以下是完整的CSS：

html, body{ height: 100%;}
.box1{width: 25%; float: left; height: 100%; }
.blue{ background-color: #0f09cc;}
.red{ background-color: #cc0000;<!-- transform: rotateX(0deg); transition: transform 1.5s;--> }
.red:hover{ animation: sparkred linear .5s; <!--  transform: rotateX(270deg); -moz-transform: rotateX(270deg); -webkit-transform: rotateX(270deg); --> }
.green{ background-color: #00cc00;}
.purple{ background-color: #cc00cc;}

@keyframes sparkred{
0%{transform: rotateX(0deg)}
100%{transform: rotateX(360deg)}
}

html，正文{高度：100%；}
.box1{宽度：25%；浮动：左侧；高度：100%；}
.blue{背景色：#0f09cc；}
.red{背景色：#cc0000；}
.red:hover{animation:sparkred-linear.5s；}
.green{背景色：#00cc00；}
.紫色{背景色：#cc00cc；}
@关键帧闪烁{
0%{transform:rotateX（0deg）}
100%{变换：旋转（360度）}
}

Fiddle在这里：

问题可能与旋转项目本身具有

：悬停

有关。元素的大小会更改，因此悬停复选框也会更改

可以有一个旋转的内部元素，同时具有相同的悬停复选框

在这把小提琴里，我找到了一些有用的东西；您可以将此作为示例

---

是“卡车”吗？你确定吗？谢谢，@secretformula，但是你能想出一个解决办法吗？