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

Question

Я просто наткнулся на простой флэш-анимации на флип-карты
The Playing Card Effect
Карта имеет 2 изображения «фронт» изображение и «назад» изображение,
при нажатии на карту переключается с поворотом по оси Z
с изображением передней и задней поверхности соответственно.

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

PS: Я полный новичок/noob, когда дело доходит до HTML5 и CSS3.

Спасибо всем

Answer 1

It's possible using CSS3 with Javascript

Когда вращение делает поэтому карта показывает ее заднюю сторону, переключить графику на «задней стороне» графика. В противном случае установите изображение src в графическое изображение на передней панели.

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

Answer 2

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

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