CSS 3D Transform - открытие карты

Question

Я делаю открытки. Когда пользователь нажимает на карту, она откроется и покажет ее содержимое. Как это сделать в CSS и javascript? Я использую перспективу и вращение, как вы можете видеть here. Если вы знаете пример, который похож на то, что я пытаюсь сделать, отправьте ссылку.

Answer 1

Вот решение, что я играл с:

1. Создать стиль, который делает анимацию вращения.
2. Создать стиль для конечного результата анимации (в основном так же, как ваш to раздел в стиле анимации.
3. Создание кнопки или триггер, чтобы добавить стиль вращения к вашему <div>
4. Установите тайм-аут в JavaScript для той же продолжительности, анимации.
5. После того, как тайм-аут триггера, удалите стиль анимации и добавить конечный результат стиля

Here's a modification of your jsFiddle. Получение задней стороны к работе была несколько причуд. спинка должна быть ро так что его правый край соединяется с левым краем передней стороны. Затем вы должны повернуть заднюю сторону -180 градусов, чтобы она начиналась за передней страницей. Кроме того, мне пришлось переключать z-индексы, как только анимация достигла середины.

Все это трудно объяснить здесь, поэтому я посвятил an entire blog post. Я создал кучу визуальных средств, чтобы помочь понять это.

Answer 2

Существует также более простое решение для работы; вместо переключения z-индексов с таймером вам просто нужно указать, что элементы не имеют обратной стороны (-webkit-backface-visibility: hidden), и переверните желтую карточку на 180 градусов, поэтому ее задняя часть касается красной задней стороны.

Таким образом, вам нужно только перевернуть контейнер, содержащий желтые и красные карточки, что можно сделать, добавив класс (например, class="card opened").

Вот ваш пример кода с этими изменениями: [. Это] http://jsfiddle.net/pYJm6/90/