CSS - translate3d, похоже, ничего не делает?

Question

Я не понимаю, это похоже на ошибку, но она совместима с несколькими браузерами. Так что ошибка должна быть в моей голове.

В принципе, у меня есть этот блок с изображением и некоторым текстом. Заголовок внутри этого блока состоит из нескольких элементов span с каждым символом в них. Я хочу угаснуть их, с непрозрачностью от 0 до 1 и перемещаю их около 30 пикселей при наведении, с небольшой задержкой на каждом пролете. Это не проблема. Но по какой-то причине работает только непрозрачность, а не translate3d.

У меня jsfiddle, чтобы описать его: https://jsfiddle.net/w5Lgdgt9/5/

HTML:

<div class="tiles-wrapper"> 
    <article class="tiles-block"> 
     <a href=""> 
     <img src="https://orig06.deviantart.net/91ee/f/2008/209/1/9/cat_stock_002_by_pc_stock.jpg"> 
     <h3> 
      <span>L</span> 
      <span>o</span> 
      <span>r</span> 
      <span>e</span> 
      <span>m</span> 
      <span></span> 
      <span>i</span> 
      <span>p</span> 
      <span>s</span> 
     </h3> 
     </a> 
    </article> 
    </div> 

CSS:

.tiles-wrapper { 
    position: relative; 
    overflow: hidden; 
} 

.tiles-block { 
    width:100%; 
} 

img { 
    width: 100%; 
    transition: transform .9s ease; 
    transform: scale(1); 
} 

span { 
    position: relative; 
    transition: opacity .3s, transform .3s ease; 
    opacity: 0; 
    transform: translate3d(0,-30px,0); 
    color:#000; 
    font-weight: bold;  
} 

h3 { 
    position: absolute; 
    left: 0; 
    top: 0; 
    width: 100%; 
    margin: 0; 
    text-align: center; 
    z-index: 1; 
    transition: opacity .3s ease, transform .3s ease; 
    opacity: 0; 
    transform: translate3d(0,40px,0); 
    padding: 70px; 
    font-size: 24px; 
} 

a { 
    display:block; 
    margin: 0; 
    position: relative; 
} 

h3 span:nth-of-type(1) { 
    transition-delay: .2s; 
} 

h3 span:nth-of-type(2) { 
    transition-delay: .4s; 
} 

h3 span:nth-of-type(3) { 
    transition-delay: .6s; 
} 

h3 span:nth-of-type(4) { 
    transition-delay: .8s; 
} 

h3 span:nth-of-type(5) { 
    transition-delay: 1s; 
} 

h3 span:nth-of-type(6) { 
    transition-delay: 1.2s; 
} 

h3 span:nth-of-type(7) { 
    transition-delay: 1.4s; 
} 

h3 span:nth-of-type(8) { 
    transition-delay: 1.6s; 
} 

h3 span:nth-of-type(9) { 
    transition-delay: 1.8s; 
} 

h3 span:nth-of-type(9) { 
    transition-delay: 2s; 
} 


a:hover span{ 
    opacity: 1; 
    transform: translate3d(0,0,0); 
} 

a:hover h3 { 
    opacity: 1; transform: translate3d(0,0,0); 
} 

a:hover img{ transform: scale(1.1); } 

К сожалению об ужасном коде CSS, я обычно использую SASS и Я не мог заставить его работать над jsfiddle. Кроме того, не беспокойтесь о префиксах на переходном материале, gulp позаботится об этом для меня, так что это не проблема.

Answer 1

Узнало, это потому, что пролет элементы не были установлен в встроенный блок. Поскольку translate и translate3d работает только с блочными элементами. Stupid me

Answer 2

Использования: перевести

вместо:

translate3d 

Вашей скрипка обновляется с этим незначительными изменениями работает просто отлично: https://jsfiddle.net/w5Lgdgt9/6/