CSS - translate3d doesn't seem to do anything?

Question

I don't get this, it seems like a bug, but it's consistent through several browsers. So the bug must be in my own head.

Basically, I've got this block with an image and some text. The heading inside this block is composed of several span elements with each character in them. I want to fade these in, with opacity 0 to 1 and move them about 30 pixels on hover, with a slight delay on each span. This is no problem. But for some reason, only opacity seems to work, not translate3d.

I've got a jsfiddle to describe it: 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); }

Sorry about the horrible CSS code, I usually use SASS and I couldn't get it to work on jsfiddle. Also, don't worry about the prefixes on the transition stuff, gulp takes care of that for me, so that's not the problem.

Reading your question, probably you want to apply the `translate3d(0,0,0)` on `span:hover` and not on `a:hover span` https://jsfiddle.net/w5Lgdgt9/7/ — Fez Vrasta, Feb 14 '16 at 14:17
Your issue is that the translate is happening while the element is fading in. Thus when you hover you don't see a lot of the movement because it hasn't appeared yet. There is no error here — Zach Saucier, Feb 14 '16 at 20:11

score 4 · Accepted Answer · answered Feb 15 '16 at 09:41

4

Found out, it's because the span elements hadn't been set to inline-block. As translate and translate3d only works on block elements. Stupid me

answered Feb 15 '16 at 09:41

Kenny Bones

5,017
36
111
174

score 0 · Answer 2 · answered Feb 14 '16 at 14:12

0

Use: translate

instead of:

translate3d

Your fiddle updated with this minor change works just fine: https://jsfiddle.net/w5Lgdgt9/6/

answered Feb 14 '16 at 14:12

Scott Marcus

64,069
6
49
71

I see no difference in Chrome. It does work with the top property though. But I find it to be too sluggish – Kenny Bones Feb 14 '16 at 14:14
Working fine for me in Chrome and IE 11 – Scott Marcus Feb 14 '16 at 14:16
Then I'm at a loss. Does my initial fiddle work for you as well? If not, there must be something with the translate3d that doesn't work – Kenny Bones Feb 14 '16 at 18:21

CSS - translate3d doesn't seem to do anything?

2 Answers2