Mam nieuporządkowaną listę z kilkoma elementami listy, które działają jak karty odwracające przy użyciu transformacji 3D CSS. Chcę, aby przerzucali kliknięcia na linki / elementy zakotwiczenia wewnątrz elementów listy, a linki te wypełniają również cały element listy.

Elementy listy wyglądają i zachowują się dobrze w domyślnym stanie nieodwróconym, ale po kliknięciu jednego i odwróceniu klikalny obszar linku na jego tylnej stronie znajduje się tylko w górnej połowie elementu listy. Kiedy sprawdzam w Chrome, obszar linków nadal wypełnia całą wysokość elementu listy, więc nie jestem pewien, co się dzieje.

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

Poniżej znajduje się podsumowanie właściwości transformacji, których używam na różnych elementach (szczegóły - patrz fiddle):

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

Zauważ, że testuję w Chrome 28 w systemie Windows i używam tylko przedrostków -webkit na skrzypcach. Przepraszam również za niechlujny CSS lub znaczniki, ten problem sprawił, że trochę się iterowałem. Każda pomoc w zrozumieniu tego, co się dzieje, jest bardzo mile widziana!

Aktualizacja 8/11/2013:
Miałem ten sam problem z transformacją 2D na elementach listy (tylko odwrócenie elementu, bez przodu / tyłu). Dodanie transformaty translateZ (1px) @ thirtydot w CSS dla<a> tag też to naprawił. Wygląda więc na to, że problem jest związany z osią Z ... ale tylko z częścią łącza. Może to błąd w przeglądarkach?