TranslateZ Prozent CSS 3D Transforms

Question

Wenn ich versuche, Prozentsätze in translateZ wie folgt festgelegt:

transform:translateZ(-100%); 

es funktioniert nicht. Es funktioniert auch nicht mit Viewport relativ vh oder vw. Gibt es einen Weg, dies zu tun? Ich verstehe, dass ich es einfach mit JavaScript einstellen kann, aber ich habe viele dieser Elemente in einer bestimmten Klasse, einschließlich solcher, die später dynamisch mit JavaScript hinzugefügt werden. Es wäre viel bequemer, etwas in CSS zu tun. Ich habe etwas gesehen, das wie ein Duplikat aussah, aber ich möchte einen Weg, der nicht mehrere Elemente haben muss, um es zu reparieren. Abgesehen von dem <style> Element, das ist

Answer 1

Nun, lesen Sie die W3C-Spezifikation für translateZ, ist es nicht klar, dass jemand darüber nachgedacht hat, was sollte ein Prozentwert dort tun .. (oder zumindest ist es nicht klar für mich Was sollte die Umsetzung sein?

In der Norm wurde jedoch entschieden, dass translateX (100%) relativ zur Breite ist.

Also, ein Weg zu bekommen, was Sie würden wollen drehen, bis die x-Achse in der z-Achse ist, tun Axt Übersetzung, und Wiederherstellen der Rotation:

CSS

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

In dieser demo Sie können sehen, dass das Testelement, das diese Transformation angewendet hat, an die gleiche Position wie das ref-Element kommt, das ein translateZ (100px) hat (da die Elementbreite 100px ist)