CSS - translate3d似乎没有做任何事情？

我不明白这一点，它看起来像一个错误，但它通过几个浏览器是一致的。所以这个错误必须在我自己的头上。CSS - translate3d似乎没有做任何事情？

基本上，我已经有了一个图像和一些文本块。该块内的标题由多个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会为我处理这个问题，所以这不是问题。

来源

2016-02-14 Kenny Bones

读你的问题，可能你想在'span：hover'上应用'translate3d（0,0,0）'而不是在'a：hover span'上https://jsfiddle.net/w5Lgdgt9/ 7/ –

你的问题是，翻译是在元素淡入时发生的。因此，当你悬停时，你看不到很多的运动，因为它还没有出现。这里没有错误 –

发现了，这是因为跨接元件一直没设置为内联块。由于translate和translate3d仅适用于块元素。愚蠢的我

来源

2016-02-15 09:41:55

用途：翻译

代替：

translate3d

你捣鼓这个微小的变化更新工作得很好：https://jsfiddle.net/w5Lgdgt9/6/

来源

2016-02-14 14:12:51

我在Chrome中看不到任何差异。它确实与顶级财产一起工作。但我觉得它太迟钝 –

在Chrome和IE 11中对我很好工作 –

然后我很茫然。我最初的小提琴也适合你吗？如果没有，translate3d必须有一些不起作用的东西 –

CSS - translate3d似乎没有做任何事情？

回答

相关问题