Перевернуть блок при наведении.
Приветствую.
Помогите разобраться, есть div внутри которого картинка. При наведении блок должен перевернуться (как карта) и на тыльной стороне должен появиться другой контент, например, другая картинка. Пример такого функционала есть тут http://www.orangelabel.ru/?yclid=5771830622828710688 (чуть ниже прокрутить, там будут 7 плиточек которые переворачиваются). Чтобы перевернуть блок таким образом использую плагин rotate3Di, описание плагина здесь . Блок переворачивается, но как реализовать, чтобы на тыльной стороне был другой контент ? То что есть сейчас: html: Код:
<div class='imgcontainer'></div> Код:
.imgcontainer { background: url(1.jpg); } $('.imgcontainer').hover(function(){ $(this).rotate3Di(180,'slow'); }, function() { }); |
На сайте с примером флип делается через 3D CSS transform (rotateY) + transition, а видимость сторон — через свойство backface-visibility. rotate3Di работает немного проще, к тому же, он не поддерживается уже года два. Советую копать в сторону transform: rotateY + backface-visibility.
|
Часовой пояс GMT +3, время: 02:16. |