3D Nexus реализованный с помощью jQuery и CSS3 | RUDEBOXДанные технологии веб-дизайна позволяют создать удивительные вещи, которые ранее были доступны только благодаря flash-анимиции. С помощью трансформаций css и вспомогательных скриптов можно создать удивительные вещи, которые ограничиваются только вашей фантазией и возможностями. Гигант Google создал ряд удивительных гаджетов серии nexus, в данном примере мы рассмотрим как реализовать планшет nexus с помощью css и js. С помощью ориентации по плоскостям мы придадим эффект объемности, кроме этого будет реагировать на курсор мыши.

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

Шаг 1. HTML

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

Как вы заметили, мы еще добавим трансформацию для некоторых изображений.

3D Nexus реализованный с помощью jQuery и CSS3 | RUDEBOX

Шаг 2. CSS

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

Шаг 3. JS

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

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

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

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