css - 旋转卡在鼠标指针所在的位置

Question

我想用 CSS 制作一个动画，当鼠标悬停在一个元素上时，它应该 360 度翻转并显示它的另一面。

我使用了 animation: sparkred linear .5s; 然后使用 @keyframes 将其设置为 0% 和 100% 的动画，但动画卡在了鼠标移动的位置悬停。我还尝试了 transition: transform 方式(在 fiddle 中有注释)，但效果几乎相同。这是完整的 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)}
}

fiddle 在这里:http://jsfiddle.net/npb9M/

Answer 1

“卡住”问题可能与具有 :hover 的旋转元素本身有关。元素的大小发生变化，因此悬停点击框也会发生变化。

您可以拥有一个旋转的内部元素，同时拥有相同的悬停点击框。

在这个 fiddle 中我有一些工作；您或许可以以此为例。

http://jsfiddle.net/npb9M/1/