Próbuję stworzyć efekt 3D "otwarcia drzwi" w CSS, ale po prostu nie mogę tego zrobić. Problem polega na tym, że użycie funkcji rotateY() powoduje obrót elementu. Możesz to sprawdzić tutaj: http://jsfiddle.net/uC4du/1/Efekt 3D otwierający drzwi w CSS
Czy wiesz, jak zmienić obracającą się "oś referencyjną"? Co powinienem zrobić, aby element obrócił się używając lewych rogów jako odniesienia?
Można użyć właściwości 'transform-origin' (http://www.w3schools.com/cssref/css3_pr_transform-origin.asp).
Ustawia to na coś takiego: "-webkit-transform-origin: 0% 50%;"
Oto Twój przykład stosując tę właściwość: http://jsfiddle.net/aV76H/
nadzieję, że to pomaga!
Jedna mała aktualizacja, aby uzyskać dokładnie to, co mam na myśli: http://jsfiddle.net/aV76H/2054/ Oryginalna wersja miała dziwny wpływ na górną część, to jest wersją symetryczną –
Jest to bardzo pomocna odpowiedź, ale czy ktoś mógłby wskazać mi właściwy kierunek, aby zmodyfikować to do pracy w Firefoksie? – Ryan
Jedną z opcji jest uczynienie obiektu nadrzędnego dwukrotnie szerszym, z połową pustą. Następnie, gdy odchyla się na jego osi środkowej, widoczna część wydaje się działać jak drzwi. –
@DA Tak, zrobiłem, ale to sprawi, że wszystko będzie trudniejsze :( –
Sprawdź, czy to będzie pomocne http://tympanus.net/codrops/2011/12/19/experimental-css3-animations-for-image- transitions/tympanus.net/Development/ImageTransitions/index2.html –