Also see method 2.
The idea is to find a transform chain that would achieve this result. With transforms, we have more than one way of getting an element from position A into position B. Tested and works in current Chrome and Firefox. Doesn't work in Edge because of Issue #9457269, which I've then taken as an excuse to simplify the CSS by using CSS variables (yes, in combination with Sass) and reduce the JS.
The why. If you don't know the square's dimensions because they're relative to the scene's
width, then to translate it in any direction by half its
width, you need to use
% values inside a translation function are relative to the element's size along that axis. And since all HTML elements are flat, 2D, their size along the
z axis is
0. So using
translateZ() with any
% value does nothing because any
0. But luckily, a
translateZ is not the only way to move an element forward by half its
The how of the demo itself. The basic demo should work without JS. The no-JS version always shows the final transform chain that's all. The play/ pause is done with the checkbox hack to switch a keyframe animation from
running or the other way around. What the JS does is detect changes in the play state and start or stop updating the transform chain. This is done by reading the current computed
transform style. Which gives back a matrix from where I extract the values, compute angles and how much the element has moved relative to its computed