Пример как нарисовать красиво 3D облака использование CSS 3D-преобразований Сегодня случайно наткнулся на еще одну интересную статью об интересных эффектах и решил, что моей любимой аудитории Хабра тоже может быть интересен этот пример.
Мой английский такой же, как украинский у Азарова, поэтому перевод будет авторский.
Для нетерпеливых: Что произойдет в конце
Введение
В этой статье автор попытается рассказать и показать, как создавать красивые 3D-облака с помощью CSS3 Transformations. Автор также считает, что иметь базовое представление о том, как работают эти самые CSS 3 Transformations, не будет лишним.Ссылка на учебник Здесь Это руководство разбито на несколько простых шагов.
Каждый шаг основан на коде предыдущего и содержит ссылки на примеры.
Сделай сам!
- Создание мира и камеры
- Добавление объектов в мир
- Добавляем спрайты в облака
- Магия
- Пролог
1. Создайте мир и добавьте камеру.
Во-первых, нам нужно создать два элемента div: точку обзора (камеру) и мир.
Все остальные элементы мы будем создавать динамически, используя JavaScript. Точка обзора охватывает всю сцену и действует как камера.
Поскольку камеры для CSS 3D-преобразований не существует, будем представлять, что камера — это стекло, через которое мы видим созданный нами мир.
Мы создадим облака внутри нашего мира с помощью блэкджека и.
Мир — это div-блок, который находится внутри блока камеры и в котором будут располагаться облака.
Это пример HTML-разметки, которую мы должны получить
Теги: #css3 #JavaScript #clouds #cloud #no tags #CSS #JavaScript #HTML<div id="viewport" >
-
Gis Days 2020, Краткий Обзор Сессии Pro1
19 Oct, 24 -
Лингвистические Проблемы В Информатике
19 Oct, 24 -
Конструктор Сайтов Вебстолица.ру
19 Oct, 24 -
Университет Google Кода
19 Oct, 24 -
Ant Лэнгтона На Js И Canvas
19 Oct, 24
