CSS 转换在 Edge 中不起作用

Question

我被以下问题困住了。

在this site that I created，我有一个位于页面底部的画廊。如果我将鼠标悬停在拇指上，它们会疯狂地飞来飞去，这不是我想要的。它在其他浏览器上就像一个魅力；只有 Microsoft Edge 受到影响。

有人可以帮我让图像按预期运行吗？

CSS 如下所示：

.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;
}

Answer 1

这晚了几个月，但我相信我刚刚遇到了同样的错误并找到了解决方案。似乎 Microsoft Edge 13 在解释 transform-origin 的一些通常可接受的值时存在问题。特别是对我来说，它忽略了值right center，但与top left 一起工作正常，让我相信center 值（我在您的示例代码中看到）可能是问题所在。

我的解决方法是使用百分比值，所以 transform-origin: center bottom 将变为 transform-origin: 50% 100%。希望这对遇到此问题的其他人有所帮助。

请注意，尽管投票最多的答案建议使用 ms- 前缀，但此问题是关于最近的 MS Edge 浏览器，并且自 Internet Explorer 9 以来，对于转换属性（根据 caniuse.com）不需要该前缀。

Answer 2

埃德。其他用户：此答案不适用于 Microsoft Edge 浏览器。

您需要编写标准的transition 和transform 属性，然后为Microsoft Internet Explorer 编写-ms 前缀：

 .selector {
     -webkit-transform: scale(); /* android, safari, chrome */
     -moz-transform: scale(); /* old firefox */
     -o-transform: scale(); /* old opera */
     -ms-transform: scale(); /* old IE */
     transform: scale(); /*standard */
  }

transition 属性中的相同。您的解决方案是编写标准。

Answer 3

我发现了一些不同之处：

当我尝试使用 display:inline 旋转（变换）元素时，这在 EDGE 中不起作用。

但是，当我使用 display: inline-block 时，转换就可以了。

试试这个（在 MS EDGE 中）：

<style>
 #good span { display: inline-block; transform: rotate(-10deg); }
 #bad span { transform: rotate(-10deg); }
</style>

<div id="good"><span>WELCOME</span></div>

<div id="bad"><span>WELCOME</span><div>

Answer 4

尝试这样做，

您的图库图片使用了 fancybox API。所以可以选择更改 fancybox.js 中的动画类型。

参考：http://fancybox.net/api

你需要去fancybox js文件，找到'transitionIn，transitionOut'更改为过渡类型的效果。可以设置为“elastic”、“fade”或“none”。

根据windows，所有浏览器都可以。