Поворот по оси Z в HTML5 - Флипкарта

Question

Я только что натолкнулся на простую флеш-анимацию на флип-карте
Эффект игральной карты
На карте 2 изображения: «переднее» и «заднее»,
при нажатии карта переключается с вращением по оси Z
показывая переднюю и заднюю поверхность соответственно.

Можно ли добиться того же эффекта, используя HTML5 / Canvas / CSS3 ??

PS: я новичок / нуб, когда дело доходит до HTML5 и CSS3.

Спасибо всем

Answer 1

Возможно использование CSS3 с Javascript

Когда вращение делает так, чтобы карта показала свою обратную сторону, переключите изображение на изображение "задней стороны".В противном случае установите src для изображения на лицевой стороне.

Вы также можете наклонить контекст холста html5, используя setTransform.Или вы можете выбрать медленный маршрут и манипулировать данными пикселей вручную.

Answer 2

Это не ответ, но я понял, что вы, по-моему, говорите о реализации, после отправки формы, представленной здесь: http://sublimevideo.net/

Многие их CSS и JS запутаны, ноНасколько я могу судить, похоже, что они используют преобразования webkit через переключатель класса JS.Это очень плавно и на самом деле удивило меня тем, как потрясающе выгляделоНадеюсь, что некоторые из источников могут помочь вам.