Свободновращающийся элемент в 3D пространстве с помощью CSS переменных

Свободновращающийся элемент в 3D пространстве с помощью CSS переменных

От автора: недавно один из моих учеников спросил меня, можно ли создать элемент на экране, который можно вращать в любую сторону при помощи мыши или касаний. На первом семестре я рассказываю только о HTML5 и CSS, поэтому ответ был «нет, без JavaScript нельзя». Но в этом решении всего пара строк JS, и в нем очень интересно используются CSS переменные.

Объекты в пространстве

Разметка демо состоит всего из одного элемента:

(Вы можете поместить на странице сколь угодно много элементов, я же оставил всего один для простоты и ясности).

Современные тенденции и подходы в веб-разработке

Узнайте алгоритм быстрого профессионального роста с нуля в сайтостроении

Узнать подробнее

Тегу body заданы свойства margin: 0 и min-height: 100vh. Для центрирования элементов на странице используется flexbox:

Кроме того, была задана CSS 3D перспектива, а также две CSS переменные. Переменные используются для стилизации изображения:

Обратите внимание, что, так как мы используем больше одной переменной в свойстве transform, их необходимо обернуть в функцию calc(), чтобы не было ошибок синтаксиса. В ближайшее время, когда свойства rotateX и Y станут нативными свойствами CSS, использовать функцию calc() будет необязательно.

У изображения должны быть заданы высота и ширина, иначе flexbox растянет его.

Отслеживание позиции

Код JS начинается с нахождения изображения:

Современные тенденции и подходы в веб-разработке

Узнайте алгоритм быстрого профессионального роста с нуля в сайтостроении

Узнать подробнее

Обычно CSS переменные задаются в CSS и используются внутри стилей, но их можно задавать и через JS при помощи setProperty. Я сделал это в функции, которая берет текущую позицию указателя мыши, определяет высоту и ширину окна браузера (делит их пополам), после чего на основе этой информации определяется правильный угол наклона изображения:

Функция инициируется как движением мыши, так и касанием:

Обратите внимание, что значения в переменных поменяны местами: движение по оси Х поворачивает изображение по оси У и наоборот.

Сила переменных

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

Если вам нужна поддержка в MS Edge и IE (и если вы хотите обойти текущие ограничения в Firefox), функцию можно было бы написать на JS:

Помимо исходного кода я еще создал CodePen демо к этому уроку.

Источник: http://thenewcode.com/

Редакция: Команда webformyself.

Современные тенденции и подходы в веб-разработке

Узнайте алгоритм быстрого профессионального роста с нуля в сайтостроении

Узнать подробнее

PSD to HTML

Практика верстки сайта на HTML5 и CSS3 с нуля

Получить

Метки:

Похожие статьи:

Комментарии Вконтакте:

Комментарии Facebook:

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">

Я не робот.

Spam Protection by WP-SpamFree