Firefox 3.6 上的 CSS3 Transform 稳定吗？
我实现了图像的 CSS3 转换，并对其进行缩放和平移。当我将鼠标悬停在图像上进行变换时，生成的图像有时会闪烁或不显示。我必须稍微移动鼠标才能使其粘住。是我的代码有问题还是 Firefox 3.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。
感谢您的任何帮助。
I implemented a CSS3 transform of an image where I scale and translate it. When I hover over the image to transform the resulting image will sometimes flash or not appear. I have to move the mouse around a bit to get it to stick. Is it a problem with my code or the implementation in Firefox 3.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);
}
This production page is at: http://www.amcolan.info/Rowe/rowe.php. It's the only small photo on the right margin. I've used a javascript solution on another page that works well, but I thought I'd give CSS3 a try.
Thanks for any help.
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
原因真的很简单。看一下这个图片：
看看，当您将鼠标悬停在元素时，
:hover选择器生效，并且它会展开并平移，从而远离鼠标。现在，该元素不在鼠标下方，:hover选择器将不会生效，并且该元素会移回到鼠标下方的原始位置。然后重复该循环。现在，Firefox 3.6 不支持 CSS 过渡，因此这种情况会立即发生，或者与浏览器重新绘制屏幕的速度一样快，因此它看起来会“闪烁”或“闪烁”。
解决方案是确保在动画的所有部分期间该元素始终位于鼠标下方，或者使用 JavaScript，您可以在其中使用事件和队列来获得对动画的更细粒度的控制。
The reason is really very simple. Have a look at this image:
See, when you hover over the element, the
:hoverselector takes effect, and it expands and translates, thus moving away from your mouse. Now that the element is not under your mouse, the:hoverselector won't take effect, and the element shifts back into the original position, under your mouse. The cycle then repeats.Now, CSS transitions are not supported in Firefox 3.6, so this happens instantaneously, or as fast as the browser can repaint the screen, so it appears to 'flicker' or 'flash'.
The solution is to make sure that the element is always under the mouse during all parts of the animation, or alternatively, use JavaScript, from where you can use events and queues to gain more fine grained control over the animation.