CSS

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

使用：翻译

而不是：

translate3d

你的 fiddle 更新后的这个小改动工作得很好：https://jsfiddle.net/w5Lgdgt9/6/

Answer 2

发现，是因为span元素没有设置为inline-block。由于 translate 和 translate3d 仅适用于块元素。愚蠢的我

CSS - translate3d 似乎什么也没做？

CSS - translate3d doesn't seem to do anything?

transition

translate

css-animations

translate3d