Wenn Sie in Chrome unter OSX ein Element in 3D drehen und die Umkehrung der Drehung für ein untergeordnetes Element ausführen, werden Mausereignisse auf dem untergeordneten Element einschließlich aller Verknüpfungen unterbrochen. Der Trefferbereich scheint falsch ausgerichtet zu sein.
Die Dom-Struktur ist:
%Vor%Siehe dieses Beispiel Ссылка
Kennt jemand eine Problemumgehung unter Verwendung derselben Dom-Struktur, die den richtigen Klickbereich beibehält?
Die -webkit-transform -Eigenschaft funktioniert möglicherweise ordnungsgemäß, wenn eines der Elemente in rotateX(90deg) bzw. rotateX(-90deg) angezeigt wird.
Bei rotateX(90deg) hingegen ist nicht zu erwarten, dass die Elemente "sichtbar" oder "sichtbar" dargestellt werden.
Das (die) Element (e) würde / würden sozusagen entlang ihrer X -Achse "abgeflacht".
Bei rotateX(90deg) ist die CSS wahrscheinlich transform das Element (e) auf genau das - 90 deg (rees) sic .
Siehe linked jsfiddle, wobei die Eigenschaft css trasform auf rotateX(45deg) bzw. rotateX(-45deg) gesetzt ist, um die prospektive rotateX((n)deg) -Progression bei 45deg anzuzeigen.
Auch hier versucht die transform -Eigenschaft einfach, einen true 90 deg (ree) sic Winkel zu erreichen, der entlang der X -Achse ähnlich aussehen könnte - wenn sichtbar -
_
oder ein "Horizont".
| - Y Achse
_ - X Achse
jsfiddle Ссылка
Bearbeiten (Update, Problemumgehungen)
Ihre Antwort erwähnt den anklickbaren Bereich nicht. Auch deine Demo bietet keine Problemumgehung, die den Klickbereich beibehält. - Mark Lundin
Wenn die Anforderung das Festlegen von css property rotateX() value auf 90deg enthält, scheint element ähnlich wie display : none; zu rendern, das heißt, virtuell "unsichtbar" auf% rendern Code%.
Siehe Ссылка
Problemumgehungen
1) gilt für beide Optionen a) und b) , unten
html
%Vor% a) Rendern Sie Elemente bei screen property css , rotateX(89deg) , was rotateX(-89deg) die render s bei element bedeuten sollte, vielleicht behalten Sie zumindest einen Teil des "Effekts" co_de% "rotateX ()", versetzt um screen . jsfiddle Ссылка
b) Renderelemente bei ndeg property 1deg , css bzw. rotateX(89deg) property rotateX(-89deg) Wert auf css gesetzt, was die opacity s virtuell machen sollte / em> "invisible", ähnlich einem 0.9 rendering (siehe Ссылка ), wobei element rotateX(90deg) und hinzugefügt werden / oder css :hover :active , beide oder beide für "Benachrichtigung" von pseudo elements ("link") Präsenz bei a in element jsfiddle Ссылка
Wenn ein DOM-Element mit einem Ereignis verbunden ist, z. B. ein Klickelement, und Sie es um 90 Grad drehen, befindet sich das Element immer noch an diesem Ort, Sie können es jedoch nicht anklicken, da es flach ist. DOM-Elemente haben eine Tiefe von Null. Wenn Sie also ein DOM-Element um 90 Grad drehen, können Sie es nicht sehen. Wenn Sie das gleiche Element zurückdrehen, sehen Sie es und das Klickereignis funktioniert. technisch funktioniert der Klickbereich, wenn das Element um 90 Grad gedreht ist, es hat nur einen Nullpunktbereich, auf den geklickt werden kann.
Für die Leute, die nicht glauben, dass das Ereignis noch angebracht ist, testen Sie das aus und sehen Sie sich selbst an. Das Ereignis bleibt mit dem Element verbunden, egal wie viele Transformation Sie durchführen. Es funktioniert auch für Chrom. Dies funktioniert auch für Links. Der einzige Zeitpunkt, an dem ein Ereignis entfernt wird, ist, wenn Sie das Ereignis entfernen oder das Element entfernen. Die Umwandlung wird niemals das Ereignis oder das Element entfernen.
%Vor%Hier ist ein Beispiel mit Ihrem Beispiel:
%Vor% Sie werden feststellen, dass es immer noch funktioniert. Der Grund dafür, dass Ihr Code nicht funktioniert, ist, dass Ihre href Sie href='htpp://boom' haben. Der URI htpp://boom ist keine echte Adresse.
Es gibt keine htpp:// und boom ist keine Adresse. Ihr Fehler in Ihrem Code hat nichts mit Transformation und nichts mit CSS zu tun. Ihr Fehler verwendet keine echte URI.
Tags und Links html css3 css-transforms 3d