Три вида иконок социальных сетей 3d, изменяет размеры и с тенью

Верстка трех видов социальных иконок.

Первая иконка 3d вида, при наведении мышкой поднимается вверх и меняет цвет.

Сделаем каркас для иконки в html.

Зададим секцию с идентификатором id=iconisometric, внутри будет контейнер со списком ul.

Класс у списка зададим iconisometric-ul3.

Список состоит из двух элементов li с ссылками и иконок шрифта font awesome социальных сетей контакта vk и facebook.

Стиль для 3d иконки социальной сети.

Для списка задаем свойство display: flex, чтобы появилось две оси X и Y, также иконки встали в строку.

У элемента списка li уберем точки list-style: none и установим внешние отступы margin: 50px 30px.

Для ссылок position: relative и сделаем блочными элементы display: block, чтобы задать ширину и высоту 70 пикселей для круга, в котором будет иконка.

transform: perspective (1000px) rotate (-30deg) skew (25deg) translate (0,0).

Изменяем перспективу perspective, поворачиваем rotate, деформируем стороны относительно осей X и Y свойством skew и сдвигаем элементы на новое место translate.

Установим плавную анимацию transition: .5s.

Две стороны у иконки зададим элементами.

1. &:before будет абсолютное позиционирование. Теперь высоту height: 100% и ширину 20 пикселей. Сместим вверх на top: 10px и в лево left: -20px. Цвет будет серым background-color: #b1b1b1, как тень падает на боковые стороны. Установим под квадрат полоску свойством transform: rotate (0deg) skewX (-45deg).
2. &:after Копируем из before и меняем свойства на противоположные.
3. &:hover При наведении мышки на иконку они будет подниматься на 20 пикселей вверх transform: perspective (1000px) rotate (-30deg) skew (25deg) translate (20px, -20px) и под иконкой будет появляться серая тень box-shadow: -50px 50px 50px rgba (0,0,0,.5).

Стилизуем иконку fa.

Сделаем по больше размер font-size: 30px, отцентрируем по вертикали line-height: 70px.

Добавим плавное нажатие transition: .5s при наведении мышкой &:hover, сделаем цвет шрифта белый.

Установим стили на 3d кнопку, когда она приподнимется.

Чтобы поменять цвета при наведении у элементов каждой стороны будем использовать &:nth-child (n) это псевдокласс, который на основе номера позиции в списке li выбирает дочерние элементы.

• Для ссылки задаем цвет background-color: #4c75a3.
• У &:before будет потемнее цвет background-color: #2e4a79.
• У &:after посветлее цвет background-color: #4a71ad.

Для второй иконки также подбираем цвета.

Код в main.sass.

Иконка социальных сетей изменяет размеры и цвет при наведении.

index.html.

Код в main.sass.

Иконка с эффектом нажатия, изменяет цвет и прокручивается изображение иконки.

index.html.

Код в main.sass.