CSS - translate3d 似乎什么也没做？

Question

我不明白，这似乎是一个错误，但它在多个浏览器中是一致的。所以这个错误一定是在我自己的脑海中。

基本上，我已经有了这个带有图像和一些文字的块。 该块内的标题由几个 span 元素组成，每个元素都在其中。我想将它们淡入，不透明度为 0 到 1，并在悬停时将它们移动大约 30 像素，每个跨度都有轻微的延迟。这没有问题。但由于某种原因，似乎只有 opacity 有效， 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

使用： 翻译

代替：

translate3d

用这个小改动更新你的小提琴工作正常：https://jsfiddle.net/w5Lgdgt9/6/

Answer 2

发现，这是因为 span 元素没有设置为 inline-block。因为 translate 和 translate3d 仅适用于块元素。傻逼