CSS轉換不在邊緣工作

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

來源

2015-12-16 Gradlon von Kaenel

你需要寫標準transition和transform屬性，然後將-ms前綴爲Microsoft Internet Explorer：在transition財產

.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 */ 
    }

同。你的解決方案是編寫標準。

來源

2015-12-16 16:43:16

問題是關於Edge，而不是Internet Explorer。邊緣符合CSS3標準，並且不需要前綴。 –

-2

嘗試做這個，

使用的fancybox API.SO有選擇變革的動畫類型fancybox.js圖片庫的圖片。

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

你需要去的fancybox js文件，找到 'transitionIn，transitionOut' 變化的過渡類型的效果。可以設置爲'elastic'，'fade'或'none'。

根據windows的所有瀏覽器都會好的。

來源

2015-12-16 16:56:30 iyyappan

這不是用戶所要求的。 –

這幾個月晚了，但我相信我剛剛遇到了同樣的錯誤並找到了解決方案。看起來像Microsoft Edge 13在解釋transform-origin的某些通常可接受的值時存在問題。特別是對於我來說，它忽略了right center的值，但對top left正常工作，導致我相信center值（我在示例代碼中看到）可能是問題所在。

對我來說修復是使用百分比值，所以transform-origin: center bottom將變成transform-origin: 50% 100%。希望這可以幫助遇到此問題的其他人。

需要注意的是，儘管得票最多的回答暗示ms-前綴，這個問題是關於最近MS邊緣的瀏覽器，而前綴還沒有被Internet Explorer 9中的轉換特性（每caniuse.com）要求。

來源

2016-05-15 03:04:23

CSS轉換不在邊緣工作

回答

相關問題