cssAudio - Activefile-genericCSS - ActiveGeneric - ActiveHTML - ActiveImage - ActiveJS - ActiveSVG - ActiveText - Activefile-genericVideo - ActiveLovehtmlicon-new-collectionicon-personicon-teamlog-outoctocatpop-outspinnerstartv headernumbered-list123split-screen
user profile image

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. % 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 % of 0 is 0. But luckily, a translateZ is not the only way to move an element forward by half its width.

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 paused to 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 width.

Comments

  1. Nice visualisation. Is there a specific reason to not use translateZ? Or did you do it as a experiment?

  2. @mephysto 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. % 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 % of 0 is 0. But luckily, a translateZ is not the only way to move an element forward by half its width. 😺

  3. I use this trick all the time to deal with moving elements around based on their width or height, more than just an experiment to me :)

Leave a Comment Markdown supported. Click @usernames to add to comment.

You must be logged in to comment.
Loading...
Loading...