TranslateZ Percent CSS 3D Transforms

Question

When I try to set percentages in translateZ as follows:

transform:translateZ(-100%); 

he does not work. It also does not work with relative view of vh or vw view. Is there any way to do this? I understand that I can just install it using JavaScript, but I have many of these elements in a specific class, including those that are dynamically added using JavaScript. It would be much more convenient to do something in CSS. I saw something like a duplicate, but I would like it to not have a few elements to fix it. Besides adding to the <style> element, i.e.

Answer 1

Well, after reading the w3c specification for translateZ, it’s not clear that anyone was thinking about what the percentage should do there .. (or at least I don’t understand what the implementation should be).

However, the standard decided that translateX (100%) would be relative to the width.

So, the way to get what you want is to rotate until the x axis is on the z axis, do 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 applies this transformation falls into the same position as the ref element that has the translation applied (100px) (since the width of the element is 100px)