Создание крутой 3D сцены (CSS + HTML) с эффектным дизайном

У вашего броузера проблема в совместимости с HTML5

Сегодня мы создадим крутую 3D сцену с использованием HTML, CSS и JavaScript. Мы рассмотрим интересные приёмы вёрстки - создадим эффектный анимированный фон, переливающееся освещение сцены, 3D эффект вращения айтемов и разработаем кастомный эффект переключения слайдов с помощью cubic-bezier.

Страница урока: https://webdesign-master.ru/blog/html-css/showcase-3d-effect.html

Таймкоды:

• 00:00 Начало урока
• 01:07 Обзор материалов урока
• 08:25 Размещаем код в редакторе
• 09:41 Подключаем библиотеку слайдера
• 10:39 Настраиваем проект
• 12:19 Приступаем к HTML верстке
• 13:56 Верстка видео в качестве фона на сайте
• 17:17 Создание виньетки на CSS
• 18:27 Верстка освещения 3D сцены, анимация
• 21:45 Определяем контейнер для слайдера
• 23:12 Добавляем эффект Glow в сцену
• 25:37 HTML верстка заголовка
• 27:53 Верстка карусели Swiper
• 29:55 Левая и правая части 3D изображения
• 33:13 Вычисляем высоту с помощью CSS calc()
• 34:33 Продолжаем верстать 3D изображения
• 36:23 CSS стилизация активного айтема карусели
• 39:26 Наполняем сцену актуальными слайдами
• 40:34 Кастомная CSS анимация cubic-bezier
• 42:14 Добавляем тень моделям с помощью CSS
• 44:47 Верстка надписей айтемов
• 46:46 Создаем 3D эффект на CSS, анимация
• 52:32 Ширина слайдера на разных разрешениях
• 53:57 Fullpage навигация карусели
• 1:01:50 Кастомная анимация перелистывания Swiper

Группа ВКонтакте: https://vk.com/agragregra
Twitter: https://twitter.com/agragregra