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

 

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

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

Шаг 1. HTML

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

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

Визитная карточка для сайта с эффектом 3D

Шаг 2. CSS

Теперь определяем параметры контейнера, устанавливаем позиционирование на странице, оформление, затем мы присваиваем Hover-эффект, именно он будет отвечать за обратную сторону и переворот, указываем параметры трансформации по осям Х и Y:

Также не стоит забывать об обратной стороне, которою мы окрасили в синий цвет и стилизовали иконками социальных сетей разработчиков.

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