Главная » Файлы » Прочие скрипты » CSS

Необычная галерея с 3D поворотом блоков при наведении на CSS3 для uCoz
24.06.14, 16:34:36

Скачать файл




Очень даже неплохая галерея с 3D поворотом блока при наведении и всплывающим модальным окном с описанием для вашего сайта. Галерея очень проста в установке и использует лишь возможности CSS3

Для начала посмотрите ДЕМО

Моё тестирование в фидле:ДЕМО

Установка:

Туда, где должна быть галерея, поместите следующий код:
Код
<link rel="stylesheet" href="/css/css3_3d.css" media="screen" />  
  <ul id="grid" class="group">  
  <li>  
  <div class="details">  
  <h3>Заголовок 1</h3>  
  <a class="more" href="#info1">Подробнее...</a>
  </div>  
  <a class="more" href="#info1"><img src="Ссылка на картинку" /></a>  
  </li>  
  <li>  
  <div class="details">  
  <h3>Заголовок 2</h3>  
  <a class="more" href="#info2">Подробнее...</a>
  </div>  
  <a class="more" href="#info2"><img src="Ссылка на картинку" /></a>  
  </li>  
  <li>  
  <div class="details">  
  <h3>Заголовок 3</h3>  
  <a class="more" href="#info3">Подробнее...</a>
  </div>  
  <a class="more" href="#info3"><img src="Ссылка на картинку" /></a>  
  </li>  
  <li>  
  <div class="details">  
  <h3>Заголовок 4</h3>  
  <a class="more" href="#info4">Подробнее...</a>
  </div>  
  <a class="more" href="#info4"><img src="Ссылка на картинку" /></a>  
  </li>  
  <li>  
  <div class="details">  
  <h3>Заголовок 5</h3>  
  <a class="more" href="#info5">Подробнее...</a>
  </div>  
  <a class="more" href="#info5"><img src="Ссылка на картинку" /></a>  
  </li>  
  <li>  
  <div class="details">  
  <h3>Заголовок 6</h3>  
  <a class="more" href="#info6">Подробнее...</a>
  </div>  
  <a class="more" href="#info6"><img src="Ссылка на картинку" /></a>  
  </li>  
  </ul>  

  <ul id="information">  
  <li id="info1">  
  <div>  
  <h3>Заголовок 1</h3>  
   

Описание к блоку 1</p>  
  <a href="#" class="close">x</a>  
  </div>  
  <span class="backface"></span>  
  </li>  
  <li id="info2">  
  <div>  
  <h3>Заголовок 2</h3>  
   

Описание к блоку 2</p>  
  <a href="#" class="close">x</a>  
  </div>  
  <span class="backface"></span>  
  </li>  
  <li id="info3">  
  <div>  
  <h3>Заголовок 3</h3>  
   

Описание к блоку 3</p>  
  <a href="#" class="close">x</a>  
  </div>  
  <span class="backface"></span>  
  </li>  
  <li id="info4">  
  <div>  
  <h3>Заголовок 4</h3>  
   

Описание к блоку 4</p>  
  <a href="#" class="close">x</a>  
  </div>  
  <span class="backface"></span>  
  </li>  
  <li id="info5">  
  <div>  
  <h3>Заголовок 5</h3>  
   

Описание к блоку 5</p>  
  <a href="#" class="close">x</a>  
  </div>  
  <span class="backface"></span>  
  </li>  
  <li id="info6">  
  <div>  
  <h3>Заголовок 6</h3>  
   

Описание к блоку 6</p>  
  <a href="#" class="close">x</a>  
  </div>  
  <span class="backface"></span>  
  </li>  
  </ul>

Стиль из прикреплённого архива залейте в папку css

Материал адаптирован и подготовлен Apocalypse

Категория: CSS | Добавил: Apocalypse | Теги: блоков, при, галерея, на, наведении, CSS3, поворотом, необычная, для, 3D
Просмотров: 338 | Загрузок: 0 | Рейтинг: 1.0/1
Всего комментариев: 0
Имя *:
Email: