大佬教程收集整理的这篇文章主要介绍了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).
以上是大佬教程为你收集整理的html – CSS转换在Edge中不起作用全部内容,希望文章能够帮你解决html – CSS转换在Edge中不起作用所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。