Javascript-форум (https://javascript.ru/forum/)
-   jQuery (https://javascript.ru/forum/jquery/)
-   -   Перевернуть блок при наведении. (https://javascript.ru/forum/jquery/49774-perevernut-blok-pri-navedenii.html)

failure 27.08.2014 20:32

Перевернуть блок при наведении.
 
Приветствую.

Помогите разобраться, есть div внутри которого картинка. При наведении блок должен перевернуться (как карта) и на тыльной стороне должен появиться другой контент, например, другая картинка.

Пример такого функционала есть тут http://www.orangelabel.ru/?yclid=5771830622828710688 (чуть ниже прокрутить, там будут 7 плиточек которые переворачиваются).

Чтобы перевернуть блок таким образом использую плагин rotate3Di, описание плагина здесь .

Блок переворачивается, но как реализовать, чтобы на тыльной стороне был другой контент ?

То что есть сейчас:
html:
Код:

<div class='imgcontainer'></div>
css:
Код:

.imgcontainer { background: url(1.jpg); }
js:
$('.imgcontainer').hover(function(){
  	$(this).rotate3Di(180,'slow');
  }, function() {

  });

ixth 28.08.2014 01:28

На сайте с примером флип делается через 3D CSS transform (rotateY) + transition, а видимость сторон — через свойство backface-visibility. rotate3Di работает немного проще, к тому же, он не поддерживается уже года два. Советую копать в сторону transform: rotateY + backface-visibility.


Часовой пояс GMT +3, время: 02:16.