Простая 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.5rem; } 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 градусов.
Источник: http://feedproxy.google.com/~r/ruseller/CdHX/~3/fxDfJJiUnek/lessons.php
Дайджест новых статей по интернет-маркетингу на ваш email
Новые статьи и публикации
- 2024-05-06 » Как настраивать конверсионные стратегии: работа над ошибками
- 2024-04-22 » Комментирование кода и генерация документации в PHP
- 2024-04-22 » SEO в России и на Западе: в чем основные отличия
- 2024-04-22 » SEO для международного масштабирования
- 2024-04-22 » Как использовать XML-карты для продвижения сайта
- 2024-04-22 » Цифровой маркетинг: инструменты для продвижения и рекламы в 2024 году
- 2024-04-22 » Что такое CSS-модули и зачем они нам?
- 2024-04-17 » 23 сервиса для эффективного экспресс-аудита любого сайта
- 2024-04-08 » Яндекс переходит на новую версию Wordstat
- 2024-04-08 » Яндекс интегрировал в свой облачный сервис эмпатичную нейросеть
- 2024-04-08 » Новая версия нейросети Claude превзошла по мощности аналоги Google и OpenAI
- 2024-04-08 » Как пользоваться GPT 4 и Claude бесплатно и без VPN
- 2024-03-13 » Стратегии SEO на 2024 год
- 2024-03-13 » Как использовать анимацию с помощью JavaScript-библиотеки GSAP
- 2024-03-13 » Использование GSAP 3 для веб-анимации
- 2024-03-13 » Cогласование топографической съёмки с эксплуатирующими организациями
- 2024-02-19 » Теряются лиды? Как настроить сквозную аналитику
- 2024-02-17 » Мерч и IT: на что обратить внимание в 2024 году
- 2024-02-16 » Копируем с RSync: основные примеры синхронизации файлов
- 2024-02-15 » Лучшие noCode AI платформы для создания диалоговых ботов
- 2024-02-14 » Факторы ранжирования Google 2024 — исследование Semrush
- 2024-02-12 » Перенос сайта на другой хостинг
- 2024-02-05 » В России сформирован реестр хостинг-провайдеров
- 2024-02-04 » Использование SSH для подключения к удаленному серверу Ubuntu
- 2024-02-03 » Подключаемся к серверу за NAT при помощи туннеля SSH. Простая и понятная инструкция
- 2024-02-02 » Настройка CI/CD для Gitlab-репозитория: схемы и гайд по шагам
- 2024-02-01 » GitLab CI Pipeline. Запуск сценария через SSH на удаленном сервере
- 2024-01-29 » Introduction to GitLab’s CI/CD for Continuous Deployments
- 2024-01-26 » Настройка GitLab CI/CD
- 2024-01-25 » Установка shell gitlab runner
Все мы сидим в сточной канаве, но некоторые при этом смотрят на звезды Уайльд Оскар - (1854-1900) - английский писатель |
Мы создаем сайты, которые работают! Профессионально обслуживаем и продвигаем их , а также по всей России и ближнему зарубежью с 2006 года!
Как мы работаем
Заявка
Позвоните или оставьте заявку на сайте.
Консультация
Обсуждаем что именно Вам нужно и помогаем определить как это лучше сделать!
Договор
Заключаем договор на оказание услуг, в котором прописаны условия и обязанности обеих сторон.
Выполнение работ
Непосредственно оказание требующихся услуг и работ по вашему заданию.
Поддержка
Сдача выполненых работ, последующие корректировки и поддержка при необходимости.