- 7 Июня 2013 21:46
dimasp
в опере вообще не пашет- 8 Июня 2013 08:16
TOIIOP
В 15 версии работает -)
- 8 Июня 2013 08:16
master_z1zzz
Какой смысл публиковать такой урок, если он не работает?- 8 Июня 2013 08:34
TOIIOP
Работает все. - 8 Июня 2013 09:02
Inik1I
У меня работает(Chrome).
- 8 Июня 2013 09:14
rubyx
одна картинка на всю карусель в Firefox, в Chrome вроде работает :) - 8 Июня 2013 09:33
ppaull
Очень просим - не надо снова возвращаться к подобным бесполезным урокам!- 8 Июня 2013 12:54
Gerrar
Если Вас не интересуют такие уроки, можно просто пропустить пост и не обращать на него внимания
- 8 Июня 2013 12:53
Gerrar
неработает в Opera :( - 11 Июня 2013 10:43
Khimar
Извините, но это недоработанная херня! - 11 Июля 2013 08:03
дщдщдщ
согласен с Khimar - 15 Июля 2013 14:32
Шамиль Алисултанов
Классная Галерея Спасибо) - 22 Июля 2013 19:54
Kweckey
Никакой кросс-браузерности. Тема крутая, если переделать с умом (слишком громадная), однако осуществление на уровне "Посоны глянь чо умею". Без обид, но это так. - 30 Октября 2013 13:35
jasonalt
"В данном листинге были убраны префиксы браузеров. Полный код сможете найти в исходниках." ЧТО НЕ ПО РУССКИ НАПИСАНО, ИЛИ НЕ ТЕМ ЦВЕТОМ? КАК ВООБЩЕ МОЖНО ОСУЖДАТЬ АВТОРА КОТОРЫЙ СТАРАЛСЯ И ВОЯЛ, А ВЫ ДАЖЕ В ИСХОДНИКАХ РАЗОБРАТЬСЯ НЕ МОЖЕТЕ. ЭТО ГОВОРИТ О ВАШЕМ УРОВНЕ ПОЗНАНИЙ. - 19 Сентября 2014 09:22
georgi2541
Круто!Спасибо - 9 Марта 2016 23:11
sanel
размеры картинок поменяйте на меньшие 200х150 примерно
- Главная»
- Уроки»
- HTML и DHTML»
- Простая CSS 3D карусель изображений
Простая CSS 3D карусель изображений
В этом уроке мы рассмотрим, как можно создать простую 3D карусель изображений, с помощью CSS3 и некоторых элементов HTML5.
HTML
Структура данной галереи очень проста: восемь изображений расположены в элементе figure, обвёрнутый в div.
<div id=gallery> <figure id=spinner > <img src=wanaka-tree.jpg alt=""> <img src=still-lake.jpg alt=""> <img src=pink-milford-sound.jpg alt=""> <img src=paradise.jpg alt=""> <img src=morekai.jpg alt=""> <img src=milky-blue-lagoon.jpg alt=""> <img src=lake-tekapo.jpg alt=""> <img src=milford-sound.jpg alt=""> </figure> </div>
CSS
Изначальный CSS тоже очень прост: все изображения будут расположены вокруг элемента figure по оси z. Скорость движения выставлена в опции transition.
body { background: #100000; font-size: 1.5em; } div#gallery { perspective: 1200px; } figure#spinner { transform-style: preserve-3d; min-height: 122px; transform-origin: 50% 50% -500px; transition: 1s; } figure#spinner img { width: 40%; position: absolute; left: 30%; transform-origin-z: 50% 50% -500px; outline: 1px solid transparent; }
Далее равномерно располагаем все изображения вокруг центральной оси, с помощью nth-child:
figure#spinner img:nth-child(1) { transform:rotateY(0deg); } figure#spinner img:nth-child(2) { transform:rotateY(-45deg); } figure#spinner img:nth-child(3) { transform:rotateY(-90deg); } figure#spinner img:nth-child(4) { transform:rotateY(-135deg); } figure#spinner img:nth-child(5) { transform:rotateY(-180deg); } figure#spinner img:nth-child(6) { transform:rotateY(-225deg); } figure#spinner img:nth-child(7) { transform:rotateY(-270deg); } figure#spinner img:nth-child(8) { transform:rotateY(-315deg); }
При увеличении размеров экрана, изображения будут оставаться такими же, а расстояние между ними - расти.
В данном листинге были убраны префиксы браузеров. Полный код сможете найти в исходниках.
JavaScript
Также нам нужно вставить несколько дополнительных элементов, с помощью которых мы будем прокручивать карусель в ту или иную сторону. Добавим для этого 2 ссылки:
<a href=# style=float:leftonclick="galleryspin('-')">?</a> <a href=# style=float:rightonclick="galleryspin('')">?</a>
При клике на левую стрелку в galleryspin передастся знак минус:
var angle = 0; function galleryspin(sign) { spinner = document.querySelector("#spinner"); if (!sign) { angle = angle + 45; } else {angle = angle - 45; } spinner.setAttribute("style","-webkit-transform: rotateY("+ angle +"deg); transform: rotateY("+ angle +"deg);"); }
В зависимости от полученного значения, содержимое галереи будет смещено на 40 градусов.
Данный урок подготовлен для вас командой сайта ruseller.com
Источник урока: http://demosthenes.info/blog/690/Simple-CSS-3D-Carousel-Gallery
Перевел: Станислав Протасевич
Урок создан: 7 Июня 2013
Просмотров: 41030
Правила перепечатки
5 последних уроков рубрики "HTML и DHTML"
-
Лайфхак: наиполезнейшая функция var_export()
При написании или отладки PHP скриптов мы частенько пользуемся функциями var_dump() и print_r() для вывода предварительных данных массив и объектов. В этом посте я бы хотел рассказать вам о функции var_export(), которая может преобразовать массив в формат, пригодный для PHP кода.
-
17 бесплатных шаблонов админок
Парочка бесплатных шаблонов панелей администрирования.
-
30 сайтов для скачки бесплатных шаблонов почтовых писем
Создание шаблона для письма не такое уж простое дело. Предлагаем вам подборку из 30 сайтов, где можно бесплатно скачать подобные шаблоны на любой вкус.
-
Как осуществить задержку при нажатии клавиши с помощью jQuery?
К примеру у вас есть поле поиска, которое обрабатывается при каждом нажатии клавиши клавиатуры. Если кто-то захочет написать слово Windows, AJAX запрос будет отправлен по следующим фрагментам: W, Wi, Win, Wind, Windo, Window, Windows. Проблема?.
-
15 новых сайтов для скачивания бесплатных фото
Подборка из 15 новых сайтов, где можно скачать бесплатные фотографии для заполнения своих сайтов.
MaXFull