2

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

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

4

2 回答 2

3

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

于 2016-02-15T09:41:55.693 回答
0

使用翻译

代替：

translate3d

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

于 2016-02-14T14:12:51.750 回答