Question

我想在CSS中创建一个动画，在ihover上的一个元素上，它应该翻转360度并显示其另一面。

我使用animation: 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)}
}

小提琴在这里：http://jsfiddle.net/npb9M/

Answer 1

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

你可以让一个内部元素旋转，同时拥有相同的悬停命中框。

在这个小提琴里，我有一些工作;你或许可以用这个作为例子。

<强> http://jsfiddle.net/npb9M/1/

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

1 个答案: