css Audio - Active file-generic CSS - Active Generic - Active HTML - Active JS - Active SVG - Active Text - Active file-generic Video - Active header Love html icon-new-collection icon-person icon-team numbered-list123 pop-out spinner split-screen star tv
CodePen probably won't work great in this browser. We generally only support the major desktop browsers like Chrome, Firefox, Safari, and Edge. Use this one at your own risk! If you're looking to test things, try looking at Pens/Projects in Debug View.
user profile image

Also see method 1.

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.

This Pen is a fork of Ana Tudor's Pen translating a square forward by half its edge length without translateZ - method 1.


  1. No comments yet.

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

You must be logged in to comment.