CSS3 трансформация разлика във Firefox и Chrome и IE

Мисля, че може да има нещо общо с псевдо елемент, но не съм сигурен. Имам затруднения с ефекта на трансформационен преход с помощта на css3. Във Firefox v24 ефектът работи както искам - вижте CodePen тук http://codepen.io/patrickwc/pen/aKEec, но в Chrome и IE ефектът на границата на връзките се анимира и след това внезапно се връща обратно в позиция. Трудно е да се опише, така че най-добрият начин е да погледнете ефекта във Firefox, след това в Chrome или IE.

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="/bggoogle" target="_blank">
    <i class="shc icon-e-gplus"></i>Gplus </a>
  <a href="/bgfacebook" target="_blank">
    <i class="shc icon-e-facebook"></i>Facebook </a>
  <a href="/bgtwitter" target="_blank">
    <i class="shc icon-e-twitter"></i>Twitter </a>
  <a href="/bglinkedin" target="_blank">
    <i class="shc icon-e-linkedin"></i>Linkedin </a>
  <a href="/bgskype" 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>

Имам чувството, че бъркането с transform-origin може да го поправи, но не успях да накарам това да работи. Всяка помощ или обяснение относно разликата ще бъдат високо оценени.


transition css css-transforms transform pseudo-element
person patrickzdb    schedule 04.10.2013    source източник

Отговори (1)


arrow_upward
3
arrow_downward

Не съм сигурен защо 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

person vals    schedule 04.10.2013
comment
Благодаря, има много повече смисъл. Копирах този код от урок на друг сайт (codrops), така че ще уведомя и автора. Въпреки че запазиха своите линии (ширина:) със същия размер, така че не знаеха за проблем. - person patrickzdb; 08.10.2013