Перевернуть блок при наведении.
Приветствую.
Помогите разобраться, есть 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, время: 09:51. |