I'm getting a weird behaviour in my animation when I'm using transition on transform:matrix()
. I'm only changing one parameter, but in the transition it looks like it's handling multiple parameters.
Hard to explain, so here's an example:
div {
width: 200px;
height: 400px;
border: 1px solid black;
position: relative;
overflow: hidden;
}
span {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: red;
transform: matrix(1, -.5, 0, 1, 0, 0);
transform-origin: left bottom;
transition: transform .5s ease;
}
div:hover span {
transform: matrix(1, 0, 0, 1, 0, 0);
}
<div>
<span></span>
</div>
As you can see, it's only supposed to animate the bottom right corner (the top left is animated too, but out of view), but it seems to be doing something strange in the upper left hand corner. Any ideas how to get around this? Is there some trick to transitioning between transform:matrix
?