Firefox와 Chrome 및 IE의 CSS3 변환 차이

Question

의사 요소와 관련이 있다고 생각하지만 확실하지 않습니다. 나는 css3를 사용하여 변환 변환의 효과에 어려움을 겪고있다. Firefox v24에서는이 효과가 내가 원하는대로 작동합니다. 여기서는 CodePen http://codepen.io/patrickwc/pen/aKEec을 볼 수 있지만 Chrome 및 IE에서는 링크의 경계 효과가 애니메이션으로 나타나고 갑자기 다시 위치로 전환됩니다. 설명하기가 어렵 기 때문에 Chrome이나 IE에서 Firefox의 효과를 살펴 보는 것이 가장 좋습니다.

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에 코드에 문제가있는 이유에 대해 잘 모르겠지만 코드를 간단하게 만들면 모든 브라우저에서 정상적으로 작동합니다.

당신은이 X로 번역하고 동시에 왼쪽 값을 수정해야 할 쓸모가

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

에 CSS를 변경해야합니다; 변경 사항을 단일 값으로 집중 (왼쪽)하고 translateX를 제거하십시오.