Ich habe eine ungeordnete Liste mit einigen Listenelementen, die mithilfe von CSS-3D-Transformationen als Spiegelkarten fungieren. Ich möchte, dass sie durch Klicken auf Links / Ankerelemente innerhalb der Listenelemente umblättern, und diese Links füllen auch das gesamte Listenelement aus.

Die Listenelemente sehen in ihrem nicht gespiegelten Standardzustand gut aus und funktionieren einwandfrei. Wenn ich jedoch auf eines klicke und es spiegelt, befindet sich der anklickbare Linkbereich auf der Rückseite nur in der oberen Hälfte des Listenelements. Wenn ich in Chrome nachschaue, füllt der Linkbereich immer noch die gesamte Höhe des Listenelements aus, sodass ich nicht sicher bin, was los ist.

Geige:http://jsfiddle.net/chucknelson/B8aaR/

Im Folgenden finden Sie eine Zusammenfassung der Transformationseigenschaften, die ich für verschiedene Elemente verwende (Details siehe Geige):

-webkit-transition: 0.6s;
-webkit-transform-style: preserve-3d;
-webkit-transform-origin: 100% 1.5em;
-webkit-transform: rotateX(180deg);

Beachten Sie, dass ich in Chrome 28 unter Windows teste und nur -webkit-Präfixelemente in der Geige verwende. Ich entschuldige mich auch für unordentliches CSS oder Markup, dieses Problem ließ mich ein bisschen iterieren. Jede Hilfe beim Verstehen, was passiert, wird sehr geschätzt!

Update 11.08.2013:
Ich hatte das gleiche Problem mit 2D-Transformationen für Listenelemente (einfach das Element spiegeln, keine Vorder- / Rückseite). Hinzufügen der translateZ (1px) -Transformation von @ thirtydot im CSS für das<a> Tag repariert das auch. Es sieht also so aus, als hätte das Problem mit der Z-Achse zu tun ... aber nur mit einem Teil des Links. Vielleicht ist dies ein Fehler in Browsern?