CSS perspective with rotate & translate issue

Question

I am attempting to make a type of CSS only slide transition from one content section to another. In order to do so in an interesting way, I use CSS's perspective and rotateX to in essence lay down the page content. I then am trying to slide the content out towards the bottom of the screen using translateY

Separately, both the translateY and the rotateX work perfectly, no matter what the perspective is. However, when combined, it only works with certain perspectives based on the window size and rotateY value

In this jsFiddle it works as I would like it to in the window sizes I have tried. The problem is that I would like the perspective value to be lower, around 250px, but I cannot do so without breaking the animation.

I tried using a higher rotateY degree instead of making the perspective lower but the same issue occurs

@keyframes slide {
  0% { transform: perspective(450px); }
  25% { transform: perspective(450px) rotateX(30deg); }
  50%,100% { transform: perspective(450px) rotateX(30deg) translateY(100%);  }
}

I have tested this on CSS Deck and jsFiddle both in FireFox and Chrome and it seems to be a consistent issue

Can anyone provide me with a reason why this is happening and offer a work around?

Answer 1

Try setting the perspective as a separate rule on a parent element (as opposed to being part of the transform in the animation).

.parent {
    perspective: 250px;
}

@keyframes slide {
    25% { transform: rotateX(30deg); }
    50%, 100% { transform: rotateX(30deg) translateY(100%); }
}

Updated fiddle: http://jsfiddle.net/myajouri/DYpnU/

My reasoning:

1. The perspective does not change during the animation so there's no point in having it as part of the animation.

2. Since your elements occupy 100% of the parent's area, setting the perspective on the parent should produce the same result as setting it on the elements themselves (inside transform).

3. It seems to solve your problem (see fiddle above).

UPDATE: after more experimentation, I found that explicitly setting the translateY(0) initial value in the animation would solve the issue as well.

@keyframes slide {
    0% { transform: perspective(150px); }
    25% { transform: perspective(150px) rotateX(30deg) translateY(0); }
    50%, 100% { transform: perspective(150px) rotateX(30deg) translateY(100%); }
}

Updated fiddle: http://jsfiddle.net/myajouri/YJS3v/