Нужна помощь с 3D-преобразованиями CSS3

Question

Пожалуйста, посмотрите на эту страницу:

http://www.abhi.my/lab/3D-menu.html

Если вы еще не догадались, я пытаюсь эмулировать новую анимацию уведомлений iOS (именно там я впервые ее увидел), и, очевидно, мои два ничтожных div'а не ведут себя как полный ящик ...

Есть идеи, что я здесь не так делаю ...?

Вот к чему я бы хотел приблизиться: http://www.youtube.com/watch?v=pBgVbzBJqDc

Answer 1

Вы трансформируете свои элементы только в 2-мерном пространстве, даже если вы собираетесь получить 3D-эффект.

Рабочий пример:
http://jsfiddle.net/mrlundis/wU296/

«Нижний» интервал располагается за «передним» интервалом с помощью translate3d(x,y,z), где y и z соответствуют половине высоты элемента (он вращается вокруг своей центральной точки). Должно быть возможно добиться того же эффекта, используя -webkit-transform-origin.

-webkit-transform-origin также используется, чтобы убедиться, что содержащийся элемент div вращается вокруг своей центральной точки при наведении.