Firefox和Chrome和IE瀏覽器的CSS3變換區別

Question

我認爲它可能與僞元素有關，但我不確定。我在使用css3進行變換轉換時遇到了困難。在Firefox v24中，效果按照我的要求運行 - 請參閱CodePen http://codepen.io/patrickwc/pen/aKEec，但在Chrome和IE中，鏈接的邊框效果會生成動畫，然後突然切換回位置。這很難描述，所以最好的方法是在Firefox或IE或Chrome瀏覽器中查看效果。

body { 
 
    background: #000; 
 
    color: #fff; 
 
} 
 

 
p { 
 
    text-align: center; 
 
} 
 

 
nav.footer-social-links a { 
 
    position: relative; 
 
    margin: 0 10px; 
 
    text-transform: uppercase; 
 
    letter-spacing: 1px; 
 
    padding: 1px 12px 0 8px; 
 
    height: 32px; 
 
    line-height: 30px; 
 
    outline: none; 
 
    font-size: 0.8em; 
 
    text-shadow: 0 0 1px rgba(255, 255, 255, 0.3); 
 
} 
 

 
nav.footer-social-links a:hover, 
 
nav.footer-social-links a:focus { 
 
    outline: none; 
 
} 
 

 
.footer-social-links a::before, 
 
.footer-social-links a::after { 
 
    position: absolute; 
 
    width: 30px; 
 
    height: 2px; 
 
    background: #fff; 
 
    content: ''; 
 
    opacity: 0.2; 
 
    -moz-transition: all 0.3s; 
 
    -o-transition: all 0.3s; 
 
    -webkit-transition: all 0.3s; 
 
    transition: all 0.3s; 
 
    pointer-events: none; 
 
} 
 

 
.footer-social-links a::before { 
 
    top: 0; 
 
    left: 0; 
 
    -webkit-transform: rotate(90deg); 
 
    -moz-transform: rotate(90deg); 
 
    transform: rotate(90deg); 
 
    -webkit-transform-origin: 0 0; 
 
    -moz-transform-origin: 0 0; 
 
    transform-origin: 0 0; 
 
} 
 

 
.footer-social-links a::after { 
 
    right: 0; 
 
    bottom: 0; 
 
    -webkit-transform: rotate(90deg); 
 
    -moz-transform: rotate(90deg); 
 
    transform: rotate(90deg); 
 
    -webkit-transform-origin: 100% 0; 
 
    -moz-transform-origin: 100% 0; 
 
    transform-origin: 100% 0; 
 
} 
 

 
.footer-social-links a:hover::before, 
 
.footer-social-links a:hover::after, 
 
.footer-social-links a:focus::before, 
 
.footer-social-links a:focus::after { 
 
    opacity: 1; 
 
} 
 

 
.footer-social-links { 
 
    margin: 0; 
 
    text-align: center; 
 
} 
 

 
.footer-social-links a { 
 
    color: white; 
 
    -webkit-transition: all 0.3s; 
 
    -moz-transition: all 0.3s; 
 
    -o-transition: all 0.3s; 
 
    transition: all 0.3s; 
 
    display: inline-block; 
 
    text-decoration: none; 
 
} 
 

 
.footer-social-links a:hover::before, 
 
.footer-social-links a:focus::before { 
 
    width: 80%; 
 
    left: 10%; 
 
    -webkit-transform: rotate(0deg) translateX(50%); 
 
    -moz-transform: rotate(0deg) translateX(50%); 
 
    transform: rotate(0deg) translateX(50%); 
 
} 
 

 
.footer-social-links a:hover::after, 
 
.footer-social-links a:focus::after { 
 
    width: 80%; 
 
    right: 5%; 
 
    -webkit-transform: rotate(0deg) translateX(50%); 
 
    -moz-transform: rotate(0deg) translateX(50%); 
 
    transform: rotate(0deg) translateX(50%); 
 
}

<br/> 
 

 
<nav class="footer-social-links"> 
 
    <a href="google" target="_blank"> 
 
    <i class="shc icon-e-gplus"></i>Gplus </a> 
 
    <a href="facebook" target="_blank"> 
 
    <i class="shc icon-e-facebook"></i>Facebook </a> 
 
    <a href="twitter" target="_blank"> 
 
    <i class="shc icon-e-twitter"></i>Twitter </a> 
 
    <a href="linkedin" target="_blank"> 
 
    <i class="shc icon-e-linkedin"></i>Linkedin </a> 
 
    <a href="skype" target="_blank"> 
 
    <i class="shc icon-e-skype"></i>Skype </a> 
 
    <a href="http://last.fm/user/zerodegreeburn" target="_blank"> 
 
    <i class="shc icon-e-lastfm"></i>Lastfm </a> 
 
</nav> 
 

 
<p>Fixed with help from css-tricks forum and stackoverflow <a href="http://codepen.io/patrickwc/pen/uFGlz" target="_blank">here</a> 
 
</p>

我有一種感覺，與變換原點搞亂可能修復它，但我一直無法得到那個工作。任何幫助或解釋的差異將不勝感激。

Answer 1

我不確定Chrome爲什麼會出現代碼問題，但可以簡化它，然後在所有瀏覽器中都可以正常工作。

您應該將CSS改變

.footer-social-links a:hover::before, 
.footer-social-links a:focus::before { 
    width: 80%; 
    left: 10%; 
    -webkit-transform: rotate(0deg); 
    -moz-transform: rotate(0deg); 
    transform: rotate(0deg); 
} 

.footer-social-links a:hover::after, 
.footer-social-links a:focus::after { 
    width: 80%; 
    right: 10%; 
    -webkit-transform: rotate(0deg); 
    -moz-transform: rotate(0deg); 
    transform: rotate(0deg); 
} 

這是沒用的，做X中的翻譯，並在同一時間修改左值;更好地將更改集中在單個值（左側）中，並消除translateX