rotateY() vs matrix3d transitions in Edge

Question

I've come across a strange problem with the way Edge (and IE 11) handles my matrix3d transform. The page I'm working on has elements that already have an arbitrary transform applied to them (due to a plugin being used), however thanks to my manager I now need to apply a 180 degree rotation around the Y axis on top of this. Because of this, I could not simply use the rotateY() function as it replaced the old transform and moved the element, so I figured I'd need to use matrices. This works fine in Chrome and Firefox, but Edge doesn't seem to handle matrix3d in the same way.

Here's an example of using rotateY: http://codepen.io/anon/pen/wGqapy

(HTML)

<body>
<div class="flip-container">

        <div class="front">
            Test
        </div>


</div>
</body>

(CSS)

.flip-container,
.front {
  width: 320px;
  height: 480px;
}

.front {
  transition: 0.6s;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  background-color: green;
}

.flip-container:hover .front
{
  transform: rotateY(180deg);
}

When you mouse over the element, it rotates around the Y axis in 3D space. And here's an example of using matrix3d, using the same matrix shown in the "computed CSS" tab in Edge: http://codepen.io/anon/pen/QNMbmV

(HTML)

<body>
<div class="flip-container">

        <div class="front">
            Test
        </div>


</div>
</body>

(CSS)

.flip-container,
.front {
  width: 320px;
  height: 480px;
}

.front {
  transition: 0.6s;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  background-color: green;
}

.flip-container:hover .front
{
  transform: matrix3d(-1, 0, 0, 0, 0, 1, 0, 0, 0, 0, -1, 0, 0, 0, 0, 1);
}

This, however, seems to spin around more than one axis. This does not occur in Firefox or Chrome. Am I supposed to use some magical vendor-specific CSS? I've been unsuccessful in searching SO or Google, so I hope someone has some insight!

Thanks in advance.

vals vals · Accepted Answer · 2016-03-30T17:54:29

Matrices are very good for calculus, and for setting the transforms in an universal way. But aren't so good when you are transitioning from one state to the other.

a simple animation as

from {transform: rotate(0deg);}     
to {transform: rotate(360deg);}

is impossible to set with matrices

Also, take into account that even using matrices, you can chain them with others transforms.

All that said, let's see an example of your rotation working on a previously transformed element

.flip-container,

.front {
  width: 320px;
  height: 480px;
}

.front {
  transition: 0.6s;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  background-color: green;
  /* transform: rotate(10deg); is equivalent to matrix(0.984808, 0.173648, -0.173648, 0.984808, 0, 0) */
  transform: matrix(0.984808, 0.173648, -0.173648, 0.984808, 0, 0) rotateY(0deg);
}

.flip-container:hover .front {
  transform: matrix(0.984808, 0.173648, -0.173648, 0.984808, 0, 0) rotateY(180deg);
}

<div class="flip-container">
  <div class="front">
    Test
  </div>
</div>

rotateY() vs matrix3d transitions in Edge

1 Answers