Question

我不明白，这似乎是一个错误，但它通过几个浏览器是一致的。所以这个bug必须在我自己的头脑中。

基本上，我有一个带有图像和一些文字的块。此块内的标题由多个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

发现，这是因为span元素尚未设置为内联块。由于translate和translate3d仅适用于块元素。愚蠢我

Answer 2

使用：翻译

而不是：

translate3d

使用此次微小更改更新的小提琴工作正常：https://jsfiddle.net/w5Lgdgt9/6/

CSS - translate3d似乎什么都没做？

2 个答案: