CODEWITHSUNDEEP
cssinternet-explorercross-browsercss-transitionscss-transforms
Tim Malone
Tim Malone

Reputation: 3534

Animating the angle only on a rotate3d in IE11/Edge

I'm having trouble figuring out how to animate a change in angle with rotate3d() so that it works on IE11 and Edge.

The following works as intended in Chrome and Firefox, in that it looks a bit like the page of a book opening:

<div class="canvas">
  <div class="page">
    This is the content on the page.
  </div>
</div>

.canvas { perspective: 1000px; }

.page {
  transform: rotate3d(0, 1, 0, -65deg);
  transform-origin: 0 50%;
  transition: transform 1s;
}

  .page.opening {
    transform: rotate3d(0, 1, 0, -125deg);
  }

Here's a fiddle demonstrating the above with some additional styling to make it visible.

So while that works in Chrome and Firefox, in IE11 and Edge the animation does 'open' like the page of a book, but it also appears to 'spin' as if the browser is trying to animate the y axis.

As far as I can understand, IE/Edge shouldn't be doing this because the y axis does not change between the two states.

Is there a workaround I can use to have this work correctly in IE/Edge?

Upvotes: 0

Views: 842

Answers (1)

Tim Malone
Tim Malone

Reputation: 3534

In putting together the fiddle for this question I came across a part answer, which is deceptively simple. So, I thought I'd still post this for others who try to search for it like I did!

While I'm not entirely sure why IE/Edge is still animating each axis unlike Chrome and Firefox, there's a really simple solution in this case: because the axis is staying the same, you don't even need to use rotate3d() at all.

So, in this case:

transform: rotate3d(0, 1, 0, -65deg);

can simply be changed to:

transform: rotateY(-65deg);

IE/Edge will then animate only the rotation, and not the axis - as you would expect it to.

Here's an updated fiddle, which works in Chrome/Firefox/IE11/Edge.

Upvotes: 1

Related Questions