html – CSS转换在Edge中不起作用

我遇到了以下问题.

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

解决方法

对我来说,修复是使用百分比值,因此transform-origin：center bottom将变为transform-origin：50％100％.希望这可以帮助遇到此问题的任何人.

请注意,尽管提出了ms-前缀的最高投票答案,但这个问题是关于最近的MS Edge浏览器,并且自Internet Explorer 9以来不需要该前缀用于转换属性(每caniuse.com).

（编辑：衡阳站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!