Hexaflip: Создаем 3D кубы для различных запросов | RUDEBOXВ данном уроке мы рассмотрим один небольшой плагин, который позволит создать объемные кубические объекты, с различными вариантами манипуляций. Плагин достаточно гибкий это позволяет создавать различные примеры с ним, например: графический пароль, слайдер изображений, или установка времени. В демонстрации мы рассмотрим каждый из этих примеров, кроме этого, следует обратить внимание, что плагин использует некоторые трансформации css, это означает, что данная задумка будет работать не во всех современных браузерах.

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

Шаг 1. HTML

Всю необходимую разметку плагин создает самостоятельно, для отображения демонстрации нам необходим всего лишь один элемент:

Такие элементы как  id и class здесь необходимы для добавления специальных стилей, для данной демонстрации.

Hexaflip Создаем 3D кубы для различных запросов

Шаг 2. CSS

Плагин HexaFlip, будет автоматически присваивать класс hexaflip-cube. На основе этого мы будем определять к какому элементу будет относится стиль, давайте начнем с общих параметров.

Нам необходимо создать класс no-tween, который запретит анимацию куба с помощью JS, если вы уже зажали кнопку мыши.

Каждая из сторон куба, будет вложена в блок div, поэтому для доступа ко всем сторонам, мы будем применять селектор (>) с необходимыми стилями:

Когда стороны куба находятся не в поле зрения мы установим для них серый цвет:

Для каждой стороны куба мы установим различные цвета, они будут отображаться когда одна из сторон активна:

Со стилями мы разобрались, перейдем к следующему шагу.

Шаг 3. JavaScript

Для начала нам необходимо определить начало и конец функции, чтобы после наполнять её всеми необходимыми элементами.

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

Нам необходимо проверить два конкретных CSS3 свойства это трансформация и перспектива:

Наш конструктор будет принимать 3 значения: целевой элемент DOM, литерал объекта, содержащий наборы для отображения, и дополнительный объект настроек. Эти 3 аргумента, являются приложением к экземпляру (this):

Конструктор будет проверяет поддержку CSS3 свойств. Если поддержки нет, то конструктор сразу завершает работу:

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

Чтобы создать  трехмерный куб из шести плоских поверхностей, мы должны применить цикл ко всем лицевым сторонам, при этом указывая необходимые стили для оси и необходимого угла вращения слоёв:

_createCube задаcn правила манипуляций с помощью мыши и сенсорных девайсов:

Функция  _setSides одна из важных в HexaFlip, так как она отображает значений наборов для всех четырех активных граней куба:

Когда мышка находится в зажатом состоянии, то данная функция будет отображаться методом _onTouchMove:

Когда будем отпускать кнопку мыши будет срабатывать функция _onTouchEnd:

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

Мы будем работать с двумя дополнительными методами flip и flipBack. Первый переворачивает куб вперёд, а второй назад, соответственно на 90 градусов:

Вот и все. Готово!

Материал взят из зарубежного источника. И представлен исключительно в ознакомительных целях.

Читайте также: