Создаем 3D подсказки для сайта с помощью CSS3 | RUDEBOXНа сайтах не однократно можно повстречать подсказки различного рода. Они позволяют не только осведомить пользователя, но и придать общей читабельности для сайта. Но если вы хотите красиво оформить подсказки для изображений, или другого мультимедийного контента тогда этот урок будет вам интересен, в нем мы рассмотрим как создать замечательные, объемные подсказки для сайта с использованием только трансформаций css3. Задумка напоминает эффект вращения куба, что приятно будет радовать глаз посетителей.

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

Идея состоит в том, что пользователь, изначально, видит только изображения, но при наведении курсора на изображение — происходит трансформация и вращения куба, по окончанию анимации пользователю будет представлена подсказка. Звучит мудрено, но на деле все достаточно проще.

Шаг 1. HTML

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

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

Создаем 3D подсказки для сайта с помощью CSS3 RUDEBOX

Шаг 2. CSS

Для начала нам необходимо установить общие параметры. Кроме этого установим для wrapper параметры inline-block и значение 4000pxItem будет имеет значение preserve-3d:

Для  изображений будет несколько интереснее, мы будем использовать transition при этом будем изменять значения border-radius и box-shadow при наведении курсора.

Последним шагом будем добавление эффекта вращения. И при наведении курсора item будет вращаться:

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

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