CSS转换在Edge中不起作用 [英] CSS transform is not working in Edge
问题描述
我陷入了以下问题.
在此网站上创建的上,我有一个位于页面底部的画廊. .如果我将鼠标悬停在上方,它们会像疯了似的飞来飞去,这不是我想要的.在其他浏览器上,它的作用就像是一种魅力.仅Microsoft Edge受到影响.
On this site that I created, I have a gallery which is located on the bottom of the page. If I hover over the thumbs, they fly around like crazy which is not what I want. It works like a charm on other browsers; only Microsoft Edge is affected.
有人可以帮助我使图像表现出预期的效果吗?
Can someone help me out to get the images to behave as expected?
CSS看起来像这样:
The CSS looks like this:
.node-gallery {
float: left;
width: 150px;
height: 150px;
position: relative;
margin: 0 60px 50px 0;
}
.node-gallery img {
position: absolute;
bottom: 0px;
}
.node-gallery .image1 {
left: 0px;
z-index: 3;
-webkit-transition: all 0.2s ease;
-moz-transition: all 0.2s ease;
-o-transition: all 0.2s ease
}
.node-gallery .image2 {
left: 7px;
height: 148px;
z-index: 2;
-webkit-transition: all 0.2s ease;
-moz-transition: all 0.2s ease;
-o-transition: all 0.2s ease
}
.node-gallery .image3 {
left: 14px;
height: 145px;
z-index: 1;
-webkit-transition: all 0.2s ease;
-moz-transition: all 0.2s ease;
-o-transition: all 0.2s ease
}
.image1, .image2, .image3 {
border: 5px solid #F3F3F3!important;
box-shadow: 1px 1px 2px #666;
-webkit-shadow: 1px 1px 2px #666;
-webkit-transform: rotate(0deg) translate(0px);
}
.node-gallery:hover .image1 {
z-index: 6;
-ms-transform: rotate(-5deg) translate(-20px, -2px);
-ms-transform-origin: center bottom;
-webkit-transform: rotate(-5deg) translate(-20px, 2px);
-webkit-transform-origin: center bottom;
-moz-transform: rotate(-5deg) translate(-20px, -2px);
-moz-transform-origin: center bottom;
-o-transform: rotate(-5deg) translate(-20px, -2px);
-o-transform-origin: center bottom;
}
.node-gallery:hover .image2 {
z-index: 5;
-ms-transform: rotate(-2deg) translate(0px, 2px);
-ms-transform-origin: center bottom;
-webkit-transform: rotate(-2deg) translate(0px, -2px);
-webkit-transform-origin: center bottom;
-moz-transform: rotate(-2deg) translate(0px, 2px);
-moz-transform-origin: center bottom;
-o-transform: rotate(-2deg) translate(0px, 2px);
-o-transform-origin: center bottom;
}
.node-gallery:hover .image3 {
z-index: 4;
-ms-transform: rotate(5deg) translate(20px, -2px);
-ms-transform-origin: center bottom;
-webkit-transform: rotate(5deg) translate(20px, 2px);
-webkit-transform-origin: center bottom;
-moz-transform: rotate(5deg) translate(20px, -2px);
-moz-transform-origin: center bottom;
-o-transform: rotate(5deg) translate(20px, -2px);
-o-transform-origin: center bottom;
}
推荐答案
对此晚了几个月,但我相信我也遇到了同样的错误并找到了解决方案.似乎Microsoft Edge 13在解释transform-origin
的一些通常可接受的值时遇到问题.特别是对我来说,它忽略了值right center
,但是可以很好地与top left
一起使用,这使我相信center
值(在示例代码中可以看到)可能是问题所在.
Few months late on this, but I believe I just encountered this same bug and found a solution. It seems like Microsoft Edge 13 has a problem interpreting some normally acceptable values for transform-origin
. Specifically for me, it was ignoring the value right center
, but working fine with top left
, leading me to believe the center
value (which I see in your example code) might be the issue.
对我来说,解决方法是使用百分比值,因此transform-origin: center bottom
将变为transform-origin: 50% 100%
.希望这对遇到此问题的其他人有所帮助.
The fix for me was to use percentage values, so transform-origin: center bottom
would become transform-origin: 50% 100%
. Hope this helps anyone else who encounters this issue.
请注意,尽管最受好评的答案是建议使用ms-
前缀,但此问题与最近的MS Edge浏览器有关,并且自Internet Explorer 9起,transform属性就不需要该前缀(按
Note that despite the top-voted answer suggesting the ms-
prefix, this question is about the recent MS Edge browser, and that prefix has not been required since Internet Explorer 9 for the transform property (per caniuse.com).
这篇关于CSS转换在Edge中不起作用的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!