Примеры свойства transform в CSS
Чем ещё можно привлечь внимание пользователя? Например, при наведении курсора наша кнопочка могла бы двигаться, вращаться, искажаться или масштабироваться.
Продолжим наш эксперимент с 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-страницы.
-
Создано 27.04.2018 10:40:30
-
Михаил Русаков
Комментарии (0):
Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.