Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 27.08.2014, 20:32
Аспирант
Отправить личное сообщение для failure Посмотреть профиль Найти все сообщения от failure
 
Регистрация: 21.07.2013
Сообщений: 40

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

Помогите разобраться, есть 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() {

  });
Ответить с цитированием
  #2 (permalink)  
Старый 28.08.2014, 01:28
Аватар для ixth
Профессор
Отправить личное сообщение для ixth Посмотреть профиль Найти все сообщения от ixth
 
Регистрация: 19.01.2010
Сообщений: 354

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



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
При наведении на определенный блок, DIV, появляется скрытое сожержимое kismedia Элементы интерфейса 9 22.05.2015 19:15
Изменение текста при наведении xformer jQuery 2 11.07.2014 10:09
Разделение на 3 картинки и их открытие при наведении курсора Михаил_Michail Элементы интерфейса 1 07.07.2014 12:11
Смена фона при наведении Crystal Элементы интерфейса 3 13.10.2011 12:23
Как сделать, чтобы при наведении на кнопку справа от нее появлялись текстовые ссылки? Tass Общие вопросы Javascript 7 17.02.2011 09:06