Чем ещё можно привлечь внимание пользователя? Например, при наведении курсора наша кнопочка могла бы двигаться, вращаться, искажаться или масштабироваться.
Чем ещё можно привлечь внимание пользователя? Например, при наведении курсора наша кнопочка могла бы двигаться, вращаться, искажаться или масштабироваться.
Продолжим наш эксперимент с CSS трансформацией кнопки, начатый в предыдущей статье.
Эффекты трансформации можно увидеть при наведении мыши на элементы. демо
Поворот кнопки transform: rotate
Сделаем так, что при наведении курсора, кнопка повернется на 15 градусов. Для этого создадим для кнопки класс .button_rotate и пропишем в псевдокласс hover (состояние при наведении) свойство transform: rotate.
.button_rotate:hover {
background-color: #4feac8;
transform: rotate(15deg);
}
Обратите внимание, что теперь мы добавили свойство transform не к элементу, а к его состоянию, в отличии от transition. Благодаря тому, что свойство transition со значением all все ещё прописано у элемента, то сама трансформация при наведении происходит плавно. Таким образом, прописав all, мы убиваем двух зайцев, плавный переход работает как для замены цвета, так и для поворота кнопки при наведении.
transition: all 1s ease;
Перемещение кнопки transform: translate
CSS свойство translate – перемещает кнопку по горизонтали и вертикали на заданное в скобочках значение.
.button_translate:hover {
background-color: #4feac8;
transform: translateX(50%);
}
Масштабирование кнопки transform: scale
CSS свойство scale – масштабирует кнопку как в сторону увеличения, так и уменьшения, в зависимости от заданного значения.
.button_scale:hover {
background-color: #4feac8;
transform: scale(2); /* Увеличивает в 2 раза */
}
Искажение кнопки transform: skew
CSS свойство skew – перемещает кнопку по горизонтали и вертикали на заданное в скобочках значение.
.button_skew:hover {
background-color: #4feac8;
transform: skew(20deg);
}
Как насчет кроссбраузерности?
Идем на сайт Can I Use и проверяем. Все вышеперечисленные свойства поддерживают почти все обновляемые браузеры, кроме Opera Mini.
Проблема наблюдается, как всегда у старых браузеров IE и Safari, которая вполне решаема, если добавить в код с псевдоэлементом hover, следующие префиксы с соответствующими свойствами.
-ms-transform: rotate(15deg); /* IE 9 */
-webkit-transform: rotate(15deg); /* Safari */
Вы скажите, ну хорошо, теперь я знаю кое-что о CSS трансформации. Но ведь этого мало, просто знать эти замечательные свойства, уметь примитивно двигать и поворачивать разные элементы сайта, как 3-ёх летний ребенок. Нужна какая-то осмысленность и целесообразность.
Анимация кнопки с помощью transform rotate
Давайте сделаем кнопку с иконкой, при наведении на которую, шестеренки будут весело и быстро вращаться, сделав один полный оборот.
Как всегда, начнем с HTML разметки:
<div>
<a class="button_anime" href="#">Заказать работу
<img src="settings.png" alt="">
</a>
</div>
В CSS создадим класс для кнопки:
.button_anime {
background-color: #2bc6a4;
border: none;
border-radius: 15px; /* Закругляем углы */
color: #fff;
display: block; /* Это блоковый элемент */
padding: 10px 20px;
text-align: center;
text-transform: uppercase;
width: 25%;
margin: auto;
font-family: sans-serif;
font-size: 22px;
text-decoration: none;
transition: all 1s ease; /* Плавный переход */
line-height: 39px; /* Вертикальное выравнивание текста */
}
Для иконки подбираем позиционирование относительно блока с кнопкой.
img {
position: relative;
left: -245px;
top: 6px;
border: none;
transition: all 1.5s ease; /* плавное вращение, без transition эффект не виден */
}
Важно! Распространенная ошибка новичков, в том, что они не прописывают свойство transition для анимируемого элемента. Без transition в селекторе img, вращение иконки будет происходить настолько быстро, что мы его не заметим.
Ну и последний фрагмент CSS кода, отвечает за само действие transform. При наведении на иконку, она поворачивается на 360 градусов.
.button_anime:hover img {
transform: rotate(360deg); /*Поворот иконки на 360 градусов*/
}
Пример вращения иконки при наведении курсора находится в самом низу demo-страницы.
