10 потрясающих 3D-проектов, полностью созданных с помощью CSS и JavaScript

Сеть прошла долгий путь от коммутируемого Интернета и страниц GeoCities. Веб-сайты теперь полностью адаптивны и доступны с устройств с сенсорным экраном. Но современные браузеры продвинулись даже дальше «мейнстримного» веб-дизайна.

В браузере можно создавать удивительные 3D-эффекты, используя только внешние технологии. И в этом посте я покажу свои любимые 3D веб-проекты, которые показывают, как далеко продвинулся Интернет за несколько коротких десятилетий.

Ящики перспективы

Хотите верьте, хотите нет, но эта анимация коробки была сделана с помощью чистых преобразований CSS3. Настоящие кубы довольно легко визуализировать с помощью CSS, а чередующиеся цвета работают с разными классами.

Анимация использует циклическую анимацию ключевых кадров, чтобы создать иллюзию того, что эти коробки подпрыгивают в трехмерном пространстве. Нажав любую из кнопок перспективы в правом верхнем углу, вы даже можете просмотреть эту 3D-модель под разными углами. Довольно круто!

График на чистом CSS3

Еще одним примером анимации на чистом CSS3 является эта гистограмма, созданная Аной Тюдор. Он использует простой HTML-контейнер с четырьмя внутренними элементами div, представляющими четыре стороны каждого прямоугольника.

Полосы достаточно легко анимировать с помощью CSS3, и все они вырастают до разной высоты. Но больше всего впечатляет то, как вся эта анимация меняет углы обзора , даже когда гистограмма растет.

Это использует много кода Sass для автоматизации анимации с функциями вычисления, поэтому это немного технично. Но если вы пытаетесь узнать больше о 3D, то это надежная ручка для погружения.

Туннельное зрение

Взгляните на этот трехмерный туннель, созданный с помощью всего лишь некоторых преобразований CSS3 и свойств Sass, чтобы получить удовольствие от работы с браузером Webkit.

Чередующиеся цвета проходят через цикл Sass for, который меняет значение цвета HSL через определенный период времени. Эта петля создает иллюзию того, что вы бесконечно путешествуете по туннелю из разноцветных кусочков конфетти. Довольно дикий!

Это может не показаться чем-то особенным, и это определенно непрактично для крупного веб-сайта. Но это свидетельство того, как много вы можете сделать, используя немного творчества и знаний в области кодирования.

3D iPhone в CSS

iPhone 4 предложил радикально новый дизайн, и все были в восторге от нового убойного смартфона. Разработчику Джонатану Левайяну, должно быть, очень понравился iPhone 4, так как он воссоздал дизайн на чистом CSS.

Что касается вращающихся устройств, то это чертовски круто. Он действительно похож на iPhone, а внешняя полоса даже отражает свет с реалистичным градиентом. На экране iPhone воспроизводится видео в формате mp4, размещенное на серверах Apple, и оно также корректно искажается в перспективе.

Что самое безумное в этом, так это то, что он во всем полагается исключительно на CSS. Я буду в восторге еще через 10 лет, когда iPhone с чистым CSS3 станет полностью интерактивным в браузере.

3D Солнечная система

Млечный Путь — наш маленький уголок Вселенной, и он полностью представлен этой удивительной ручкой, созданной Джулианом Гарнье.

Он использует много CSS, но большинство настраиваемых эффектов основаны на JavaScript. Это позволяет вам изменять скорость, размер и расстояние до различных планет.

Вы даже можете относительно легко переключаться между 3D-видом и 2D-видом сверху. Расскажите о звездном использовании фронтенд-разработки!

Затененные кубы

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

Но есть интерактивная настройка, в которой вы можете анимировать кубики при наведении курсора мыши. Это определенно крутой трюк, и он основан на нескольких редких приемах CSS, включая псевдоклассы :hover и :checked вместе с tilde(~) selector .

CSS 3D-карусель

Карусели изображений отлично подходят для демонстрации графики, фотографий и даже видео поочередно. А с помощью этой карусели CSS3 вы можете вывести эти забавные слайдеры на совершенно новый уровень.

Эта очень простая 3D-карусель использует события кликов для анимации между различными элементами. 3D-стиль на удивление детализирован и основан исключительно на коде CSS.

Единственный необходимый здесь JavaScript — это переключение между кнопками «следующая/предыдущая» и анимация 3D-стилей на месте. И это на самом деле то, что вы могли бы использовать на реальном сайте, так что это может найти практическое применение в современном веб-дизайне.

Охладить льва

Вот что-то немного менее практичное, но все же невероятно интересное в использовании. Этот 3D-рендеринг льва от Karim Maaloul использует Three.js для создания забавной игры, в которой вы можете подуть прохладным воздухом на потного льва.

Когда вы перемещаете веер по странице с помощью курсора, взгляд льва будет следовать за вами. Затем просто нажмите, чтобы запустить вентилятор с электроприводом, и наблюдайте за волнением льва, когда вы направляете в его сторону прохладный поток воздуха.

Разработчик даже зашел так далеко, что создал хлопающие области в львиной гриве вместе с движением усов.

Это еще один подробный пример того, как далеко зашли 3D-эффекты.

3D-контроллер РЭШ

Классические игры оставили свой след в нынешнем поколении программистов, и вы можете убедиться в этом на примере 3D-контроллера NES Йохана ван Тонгерена, созданного с использованием чистого CSS3.

Лучше всего он работает в браузерах Chrome/WebKit, хотя и в Firefox он должен нормально отображаться. На самом деле это скорее эксперимент, чтобы увидеть, как далеко продвинулся CSS, поэтому не ждите, что он будет идеальным!

Кеплер Орбиты

Я не могу себе представить, сколько времени ушло на создание этой реалистичной модели орбиты Кеплера. Эта модель показывает движение одного тела относительно другого в пространстве, и в этом случае разработчик Дэни Клоусон проделала невероятную работу.

Вся эта модель использует CSS для визуальных эффектов и Three.js для 3D-эффектов. В верхнем левом углу вы найдете поле параметров, в котором вы можете изменить многие переменные орбиты, чтобы повлиять на скорость, размер и размещение объекта.

Вы даже можете заметить, что объект на орбите использует реалистичный свет с затенением в зависимости от того, какая сторона указывает на солнце. Это дико впечатляет и занимает первое место в этом списке за огромное внимание к деталям.

Я надеюсь, что эти примеры вдохновят вас узнать больше о фронтенд-разработке и, возможно, даже создать свои собственные 3D-проекты.