<MyRusakov.ru />

Создание приложений для Android с нуля

Создание приложений для Android с нуля

Данный курс научит Вас создавать приложения любой сложности для Android. Курс состоит из 16-ти разделов, из которых Вы узнаете, как создавать свои собственные приложения для Android.

В курсе содержится вся необходимая теория, а также множество практических примеров, в том числе, и из моей личной практики.

Просмотрев данный курс и выполнив упражнения из него, Вы сможете создавать приложения любой сложности для самой популярной мобильной ОС в мире - Android.

Подробнее
Подписка

Подписавшись по E-mail, Вы будете получать уведомления о новых статьях.

Подписка Подписаться

Добавляйтесь ко мне в друзья ВКонтакте! Отзывы о сайте и обо мне оставляйте в моей группе.

Мой аккаунт Мой аккаунт Моя группа
Опрос

Каким движком Вы предпочитаете пользоваться?

Примеры свойства transform в CSS

Примеры свойства transform в CSS

Чем ещё можно привлечь внимание пользователя? Например, при наведении курсора наша кнопочка могла бы двигаться, вращаться, искажаться или масштабироваться.

Продолжим наш эксперимент с CSS трансформацией кнопки, начатый в предыдущей статье.

Примеры свойства transform в 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

Давайте сделаем кнопку с иконкой, при наведении на которую, шестеренки будут весело и быстро вращаться, сделав один полный оборот.

Примеры свойства transform в CSS

Как всегда, начнем с 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 градусов*/
}

Пример вращения иконки при наведении курсора находится в самом низу демо-страницы: демо

Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!

Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.

Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления

Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.

Порекомендуйте эту статью друзьям:

Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

  1. Кнопка:

    Она выглядит вот так: Как создать свой сайт

  2. Текстовая ссылка:

    Она выглядит вот так: Как создать свой сайт

  3. BB-код ссылки для форумов (например, можете поставить её в подписи):

Комментарии (0):

Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.