I have a problem with transformations in Chrome (webkit browsers).
I would like to store the states of the elements in CSS classes and tween the elements from one state to other by class names.
In the codepen example I rotate the red box three times, with different methods. All of it works perfectly in other browsers, but in Chrome the first tween is scaling instead of rotating. When I inspect the element I can see that in the first tween the browser use the -webkit-transform with a matrix, and the other two tweens use transform, with matrix3d.
What's the solution?
Thanks for the help!