Firefox3.6上的CSS3 Transform稳定吗？

Question

我在缩放和平移图像时实现了CSS3转换。当我将鼠标悬停在图像上进行转换时，生成的图像有时会闪烁或不出现。我得把鼠标移动一点才能让它粘住。是我的代码有问题还是Firefox3.6的实现有问题？

html：

<a class="image-transform" href="#" title="William and Catherine"><img src="images/William_Walter_and_Catherine_Rowe.jpg" alt="William Walter and Catherine Rowe"/></a>

css：

.image-transform img
{
    float:right;
    width: 75px;
    background-color: #ffffff;
    margin: 1em 1em 1em 1em;
    padding: 3px;
    border: solid 1px;
    -moz-box-shadow: 5px 5px 5px #888;
    -o-box-shadow: 5px 5px 5px #888;
    -webkit-box-shadow: 5px 5px 5px #888;
    box-shadow: 5px 5px 5px #888;
    -moz-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;
}
.image-transform:hover img 
{
/*  width: 300px;*/
    -moz-transform: scale(4) translate(-60px);
    -webkit-transform: scale(4) translate(-60px);
    -o-transform: scale(4) translate(-60px);
    transform: scale(4) translate(-60px);
}

此生产页面位于：http://www.amcolan.info/Rowe/rowe.php。这是右边唯一的一张小照片。我在另一个页面上使用了javascript解决方案，效果很好，但我想我应该试一试CSS3。

谢谢你的帮助。

Answer 1

原因其实很简单。看看这张图：

​

​

请看，当您将鼠标悬停在元素上时，:hover选择器会生效，它会展开和平移，从而远离鼠标。现在该元素不在鼠标下方，:hover选择器将不会生效，并且该元素将移回鼠标下方的原始位置。然后循环重复。

现在，在Firefox3.6中不支持CSS转换，所以这是瞬间发生的，或者像浏览器重新绘制屏幕一样快，所以它看起来是“闪烁”或“闪烁”的。

解决方案是确保在动画的所有部分中元素始终位于鼠标下方，或者使用JavaScript，您可以在其中使用事件和队列来获得对动画的更细粒度的控制。