<MyRusakov.ru />

Создание крупного проекта на Java с нуля

Создание крупного проекта на Java с нуля

Данный курс научит Вас создавать крупные проекты на Java грамотно и быстро. В курсе Вы увидите создание большой и сложной программы на Java абсолютно с нуля.

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

В рамках упражнений курса Вы параллельно со мной будете создавать свою большую программу на Java, что даст Вам необходимую практику, после которой для Вас уже не будет разницы, какого размера создавать программы.

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

Подписавшись по 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):

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