TranslateZ Percentages CSS 3D Transforms

Question

When I try to set percentages in translateZ like this:

transform:translateZ(-100%);

it doesn't work. It also doesn't work with viewport relative vh or vw. Is there some way to do this? I understand that I can simply set it with JavaScript, but I have many of these elements in a certain class, including ones that are added later dynamically with JavaScript. It would be much more convenient to do something in CSS. I saw something which seemed like a duplicate, but I would like a way that doesn't have to have multiple elements to fix it. Apart from appending to the <style> element, that is

Answer 1

Well, reading the w3c specification for translateZ, it's not clear that anybody has think about what should do a percentage value there ..(or at least, it's not clear for me what should be the implementation).

What has been decided in the standard, however, is that translateX(100%) will be relative to width.

So, a way to get what you want would be to rotate until the x axis is in the z axis, do a x translation, and restore the rotation:

CSS

transform: rotateY(-90deg) translateX(100%) rotateY(90deg);

In this demo you can see that the test element, that has that transform applied, gets to the same position that the ref element , that has a translateZ(100px) applied (since the element width is 100px)