Эта подборка топовых CSS hover-эффектов превратит твой скучный сайт в интерактивный аттракцион. Голографические карточки, жидкие морфинги и 3D-кубы — все, чтобы твои пользователи залипали и возвращались снова! Привет, друзья! Я – Кирилл Мыльников, frontend-разработчик в ГК Юзтех. В этом материале мы разберем, изучим топ hover эффектов для CSS. Безусловно, классика всегда остается актуальной. Давайте начнем с базового, но эффектного решения — карты с динамическим трансформационным эффектом. При взаимодействии...

В этом уроке мы рассмотрим различные двухмерные трансформаций, которые можно реализовать при помощи свойств CSS. Общий синтаксис трансформации: transform: функция трансформации(значение трансформации); Функция translateX - позволяет перемещать объекты по горизонтали, т.е. по оси x. Например, следующая запись сдвинет элемент вправо на 200 пикселей: transform: translateX(200px); Если значение трансформации задать отрицательным, то элемент сдвинется влево. Из единиц измерения обычно применяются px или %. Функция translateY - позволяет перемещать объекты по вертикали, т.е. по оси y. Принцип тот же – положительное значение сдвигает объект вниз, отрицательное вверх...