Wenn ich versuche, Prozentsätze in translateZ wie folgt zu setzen:
%Vor% 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 Anhängen an das Element <style> ist das
Gut, wenn ich die w3c-Spezifikation für translateZ lese, ist nicht klar, dass irgendjemand darüber nachgedacht hat, was dort einen Prozentwert haben sollte. (oder zumindest ist mir nicht klar, was die Implementierung sein soll).
Was im Standard entschieden wurde, ist jedoch, dass translateX (100%) relativ zur Breite ist.
Also, ein Weg, um zu bekommen, was Sie wollen, wäre zu rotieren, bis die x-Achse in der z-Achse ist, eine x-Übersetzung zu machen und die Rotation wiederherzustellen:
CSS
%Vor%In dieser Demo können Sie sehen, dass das Testelement, auf das die Transformation angewendet wurde, dieselbe Position erhält wie die ref-Element, auf das ein translateZ (100px) angewendet wird (da die Elementbreite 100px ist)
Tags und Links javascript html css css3