Веб-анімація гортання карток з BundleStars

Помітив цікавий ефект перелистування карток на BundleStars. Він сподобався мені одразу. Але не міг зрозуміти за яким принципом він працює. Крутив-крутив та все ж витягнув його звідти. Виявляється там не все так просто. На чистому CSS3 як от у iHover такий ефект не виходить зробити. Хоча такі параметри є:

.flipper {
  /*...*/
  transition: 0.5s;
  transform-style: preserve-3d;
  /*...*/
}

Далі за допомогою Modernizr перевіряється підтримка preserve-3d та робиться підстановка стилів або заглушок.

Словом, ось результат на codepen.io. Думаю якось прикрутити його до портфоліо:

See the Pen Nice flipper from BundleStars by Maks Lyashuk (@probil) on CodePen.

Увага! Якщо у вас не працює анімація – відкрийте у вікні (edit on CODEPEN), бо чомусь час від часу не працює вбудовано. Думаю це через бібліотеку Modernizr та її використання у iframe.

Підтримка браузерами

Мобільні – починаючи з Android 3.0, а на ПК звичайна. IE як завжди позаду воза. Не дарма, люди просять Micro$oft припинити його розробку.