deg в CSS


Содержание

CSS3 — трансформации

Когда мы изучали возможности HTML5 Canvas, то затронули возможность трансформаций — способов перемещения, масштабирования, наклона и вращения содержимого. На холсте трансформации можно использовать для изменения рисуемой на нем графики. А трансформации CSS3 служат для изменения внешнего вида элементов. Далее мы рассмотрим каждый вид CSS3-трансформаций.

Поворот

Трансформации CSS3 являются новой и экспериментальной возможностью. Поэтому при их использовании нужно указывать несколько версий свойства transform, каждую со своим префиксом разработчика браузеров. Далее приведен пример правила трансформации для вращения элемента со всем его содержимым:

В предыдущем примере с помощью свойства трансформаций transform задается функция rotate(), которая вращает элемент на 45° вокруг его центра:

Применение трансформации к какому-либо элементу страницы не влияет на другие ее элементы или ее компоновку. Например, если повернуть элемент, то он просто надвинется на смежные с ним элементы, как показано на рисунке выше.

Обратите внимание, что в предыдущем примере угол поворота задавался в градусах. Спецификация CSS3 предлагает возможность задавать угол и в других математических величинах:

Единицы измерения угла поворота CSS3-трансформации

Единица измерения CSS3-обозначение Описание Пример
Градусы deg Угол полной окружности 360° rotate(90deg)
Грады grad Единица измерения плоских углов, равная 1/400 угла полной окружности или π/200 rotate(100grad)
Радианы rad 2π радиан равно углу полной окружности rotate(1.57rad)
Обороты turn 1 угол полной окружности равен одному обороту rotate(.25turn)

Ниже показан пример правила таблицы стилей в котором используется такая же трансформация как и раньше, только с заданием другой единицы измерения:

Масштабирование

Для использования анимации масштабирования используется функция scale(). Значение масштаба задается относительно единицы: scale(2) — исходный элемент будет увеличен в два раза, scale(0.5) — элемент уменьшается в два раза. Согласно этим правилам элемент масштабируется одинаково во все стороны, но вы можете задать направление: X — по горизонтали, Y — по вертикали, Z — глубина масштабирования.

Более того, функцию scale() можно использовать для создания эффекта отражения. Для этого нужно передать отрицательное значение в функцию scale(). Давайте рассмотрим некоторые примеры масштабирования. Для начала уменьшим нашу картинку с текстом в два раза:

Теперь растянем элемент в два раза по оси X:

Как видите здесь уже используется функция scaleX(), которая масштабирует элемент относительно оси X. И наконец, используем эффект отражения:

Перемещение

Для перемещения HTML-элемента используется функция translate(x,y), либо ее аналоги для конкретных осей translateX(x), translateY(y). Эти функции поддерживают отрицательные значения (сдвиг влево или вверх). Ниже показан пример использования трансформации перемещения:

Искажение

Трансформация skew() искажает форму элемента. Например, возьмем правильный прямоугольник с закрепленным основанием. Если мы начнем толкать его верхнюю часть в сторону, то она сместится, в то время как основание останется на месте. В результате получим параллелограмм:

Значение искажения задается в градусах (можно указывать такие же единицы измерения, как и для трансформации поворота). Ниже показан пример использования трансформации искажения:

Использование нескольких трансформаций

Вы можете объединить несколько трансформаций двумя способами: указать несколько трансформаций в одном правиле, разделив их пробелами или использовать , которая позволяет комбинировать несколькими трансформациями с помощью математической матрицы. Более подробно о матричной трансформации вы можете прочитать на сайте разработчиков браузера Opera — CSS Transforms Matrix, а ниже мы рассмотрим пример группирования нескольких трансформаций в одном правиле:

Сначала элемент увеличивается в полтора раза (используя трансформацию scale), потом перемещается на 10 пикселов влево (посредством трансформации translateX) и, наконец, наклоняется и поворачивается (используя трансформации skew и rotate).

transform css

transform: scale(2, 2);

transform: skew(-30deg, -20deg);

transform: translate(40px, -40px);

Я люблю свою работу,
Я приду сюда в субботу
И конечно в воскресенье.

Здесь я встречу день ражденья,
Новый год, 8 марта,
Ночевать я буду завтра!

Если я не заболею,
Не сорвусь, не озверею,
Здесь я встречу все рассветы,
Все закаты и приветы.

От работы дохнут кони,
Ну, а я. БЕССМЕРТНЫЙ ПОНИ!

16 комментариев:

NMitra Про запятые думаю понятно — задаём группу свойств одним и тем же классам, id.

Остальное не могу со 100% уверенностью сказать, только догадки, поскольку информации толком не изучала. Почитаю, напишу статью. NMitra Посмотрите эту статью http://shpargalkablog.ru/2011/08/kak-ispolzovat-css.html. Я думаю, что вам всё это знакомо.

Вторую планирую в том же духе. Хотя для большинства моих читателей — это китайская грамота. Космо Мизраил Горыныч Знак >
Означает, что элемент должен быть прямым наследником указанного, т.е. при div > span <. >
div -> span работает, а вот
div -> p -> span — не работает.

Знак +
Просто выбирает элемент, который стоит сразу после указанного. Очень часто используется при создании всплывающих подсказок.

Обратен знаку + . Выбирает эл-т перед указанным.

Вот такая вот арифметика :)
также знак

используется при сравнении параметров; правило исполняется, если есть указанное слово в указанном параметре, например:
p[title

Трансформация

На этой странице

CSS-свойство transform позволяет вам поворачивать, маштабировать, наклонять или сдвигать элемент. Оно модифицирует координатное пространство для CSS визуальной форматируемой модели.

The source for this interactive example is stored in a GitHub repository. If you’d like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.

Если свойство имеет значение, отличное от none , будет создан контекст наложения. В этом случае, элемент будет действовать как содержащий блок для любых элементов position: fixed; или position: absolute; которые он содержит.

Только трансформируемый элемент может быть transform . Т.е. все элементы, шаблоны которых регулируются блочной моделью CSS, кроме : неизменяемые инлайновые блоки, блоки таблица-колонка, и блоки таблица-колонка-группа.

Синтаксис

Свойство transform может быть указано как значение ключевого слова none или как одно или более значений «> .

Илон Маск рекомендует:  Элемент button

How can I rotate an HTML

How can I do this?

5 Answers 5

You need CSS to achieve this, e.g.:

(There’s 45 degrees rotation in the demo, so you can see the effect)

Note: The -o- and -moz- prefixes are no longer relevant and probably not required. IE9 requires -ms- and Safari and the Android browser require -webkit-

Update 2020: Vendor prefixes are not needed anymore. Only transform is sufficient. (thanks @rinogo)

Функция skew()

Функция наклона skew() хорошо подходит для создания эффекта 3D. Принцип ее работы заключается в наклоне всех горизонтальных либо вертикальных линий элемента на определенное количество градусов. Визуально элемент словно искажается, растягивается в определенные стороны. Наклон может производиться по осям X и Y.

Функция skew() принимает два параметра. Первый параметр отвечает за наклон по горизонтали, второй — за наклон по вертикали. В качестве значения указывается угол от 0 до 360 с приставкой deg. Например:

Первый параметр отвечает за наклон вертикальных линий к оси X. Движение происходит от верхней части элемента и против часовой стрелки:

Второй параметр, соответственно, отвечает за наклон горизонтальных линий к оси Y. Направление движения — по часовой стрелке, начиная от правой стороны элемента:

Отдельные функции для осей

По аналогии с предыдущими рассмотренными функциями, в CSS есть отдельные функции skewX() и skewY() для управления наклоном от каждой оси по отдельности.

Практический пример использования skewX() (нажмите на картинку, если вам интересен исходный код данного примера):

Код HTML для данного примера:

Код CSS для данного примера:

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

В 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.

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

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

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

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

Она выглядит вот так:

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

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

    Copyright © 2010-2020 Русаков Михаил Юрьевич. Все права защищены.

    Трансформации в CSS

    Трансформации в CSS

    Здравствуйте! В этой статье я хочу рассказать о новом свойстве в CSS3 — трансформации. Одним из нововведений CSS3 по сравнению с предыдущей версией является встроенная возможность трансформаций элемента. К трансформациям относятся такие действия, как вращение элемента, его масштабирование, наклон или перемещение по вертикали или горизонтали. Для создания трансформаций в CSS3 применяется свойство transform.

    Вращение

    Для поворота элемента свойство transform использует функцию rotate:

    После слова rotate в скобках идет величина угла поворота в градусах. Например, повернем блок на 30 градусов:

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

    Илон Маск рекомендует:  Что такое код asp logextfiledate

    Масштабирование

    Применение масштабирования имеет следующую форму:

    Значение больше 1 приводит к растяжению по вертикали и горизонтали, а меньше 1 — к сжатию. То есть значение 0.5 приводит к уменьшению в два раза, а значение 1.5 — к увеличению в полтора раза.

    Можно также задать величины масштабирования отдельно для вертикали и горизонтали:

    В данном случае по горизонтали будет идти масштабирование в 2 раза, а по вертикали — в 0.5 раз.

    Также можно по отдельности задать параметры масштабирования: функция scaleX() задает изменение по горизонтали, а scaleY() — по вертикали. Например:

    Используя отрицательные значения, можно создать эффект зеркального отражения:

    Перемещение

    Для перемещения элемента используется функция translate:

    Значение offset_X указывает, на сколько элемент смещается по горизонтали, а offset_Y — по вертикали.

    К примеру, сместим блок на 30 пикселей вниз и на 50 пикселей вправо:

    В качестве единиц измерения смещения можно применять не только пиксели, но и любые другие единицы измерения длины в CSS — em, % и тд.

    С помощью дополнительных функций можно отдельно применять смещения к горизонтали или вертикали: translateX() (перемещение по горизонтали) и translateY() (перемещение по вертикали). Например:

    Кроме положительных значений также можно использовать и отрицательные — они перемещают элемент в противоположную сторону:

    Наклон

    Для наклона элемента применяется функция skew():

    Первый параметр указывает, на сколько градусов наклонять элемент по оси X, а второй — значение наклона по оси Y.

    Для создания наклона только по одной оси для другой оси надо использовать значение 0. Например, наклон на 45 градусов по оси X:

    Или наклон на 45 градусов только по оси Y:

    Для создания наклона отдельно по оси X и по оси Y в CSS есть специальные функции: skewX() и skewY() соответственно.

    Также можно передавать отрицательные значения. Тогда наклон будет осуществляться в противоположную сторону:

    Комбинирование преобразований

    Если нам надо применить к элементу сразу несколько преобразований, скажем, вращаение и перемещение, то мы можем их комбинировать. Например, применение всех четырех преобразований:

    Браузер применяет все эти функции в порядке их следования. То есть в данном случае сначала к элементу применяется перемещение, потом наклон, потом масштабирование и в конце вращение.

    Исходная точка трансформации

    По умолчанию при применении трансформаций браузер в качестве точки начала преобразования использует центр элемента. Но с помощью свойства transform-origin можно изменить исходную точку. Это свойство в качестве значения принимает значения в пикселях, em и процентах. Также для установки точки можно использовать ключевые слова:

    • left top: левый верхний угол элемента
    • left bottom: левый нижний угол элемента
    • right top: правый верхний угол элемента
    • right bottom: правый нижний угол элемента

    Если вы нашли ошибку, пожалуйста, выделите фрагмент текста и нажмите Ctrl+Enter.

    CSS 2D Transforms

    CSS 2D Transforms

    CSS transforms allow you to move, rotate, scale, and skew elements.

    Mouse over the element below to see a 2D transformation:

    In this chapter you will learn about the following CSS property:

    Browser Support

    The numbers in the table specify the first browser version that fully supports the property.

    Property
    transform 36.0 10.0 16.0 9.0 23.0

    Browser Specific Prefixes

    Some older browsers need specific prefixes (-ms- or -webkit-) to understand the 2D transform properties:

    Example

    CSS 2D Transforms Methods

    With the CSS transform property you can use the following 2D transformation methods:

    Tip: You will learn about 3D transformations in the next chapter.

    The translate() Method

    The translate() method moves an element from its current position (according to the parameters given for the X-axis and the Y-axis).

    The following example moves the

    Example

    The rotate() Method

    The rotate() method rotates an element clockwise or counter-clockwise according to a given degree.

    The following example rotates the

    Example

    Using negative values will rotate the element counter-clockwise.

    The following example rotates the

    Example

    The scale() Method

    The scale() method increases or decreases the size of an element (according to the parameters given for the width and height).

    The following example increases the

    Example

    The following example decreases the

    Example

    The scaleX() Method

    The scaleX() method increases or decreases the width of an element.

    The following example increases the

    Example

    The following example decreases the

    Example

    The scaleY() Method

    The scaleY() method increases or decreases the height of an element.

    The following example increases the

    Example

    The following example decreases the

    Example

    The skewX() Method

    The skewX() method skews an element along the X-axis by the given angle.

    The following example skews the

    Example

    The skewY() Method

    The skewY() method skews an element along the Y-axis by the given angle.

    The following example skews the

    Example

    The skew() Method

    The skew() method skews an element along the X and Y-axis by the given angles.

    The following example skews the

    Example

    If the second parameter is not specified, it has a zero value. So, the following example skews the

    Example

    The matrix() Method

    The matrix() method combines all the 2D transform methods into one.

    The matrix() method take six parameters, containing mathematic functions, which allows you to rotate, scale, move (translate), and skew elements.

    The parameters are as follow: matrix(scaleX(),skewY(),skewX(),scaleY(),translateX(),translateY())

    Example

    Test Yourself with Exercises!

    CSS Transform Properties

    The following table lists all the 2D transform properties:

    CSS3 — трансформации

    Когда мы изучали возможности HTML5 Canvas, то затронули возможность трансформаций — способов перемещения, масштабирования, наклона и вращения содержимого. На холсте трансформации можно использовать для изменения рисуемой на нем графики. А трансформации CSS3 служат для изменения внешнего вида элементов. Далее мы рассмотрим каждый вид CSS3-трансформаций.

    Поворот

    Трансформации CSS3 являются новой и экспериментальной возможностью. Поэтому при их использовании нужно указывать несколько версий свойства transform, каждую со своим префиксом разработчика браузеров. Далее приведен пример правила трансформации для вращения элемента со всем его содержимым:

    В предыдущем примере с помощью свойства трансформаций transform задается функция rotate(), которая вращает элемент на 45° вокруг его центра:

    Применение трансформации к какому-либо элементу страницы не влияет на другие ее элементы или ее компоновку. Например, если повернуть элемент, то он просто надвинется на смежные с ним элементы, как показано на рисунке выше.

    Обратите внимание, что в предыдущем примере угол поворота задавался в градусах. Спецификация CSS3 предлагает возможность задавать угол и в других математических величинах:

    Единицы измерения угла поворота CSS3-трансформации

    Единица измерения CSS3-обозначение Описание Пример
    Градусы deg Угол полной окружности 360° rotate(90deg)
    Грады grad Единица измерения плоских углов, равная 1/400 угла полной окружности или π/200 rotate(100grad)
    Радианы rad 2π радиан равно углу полной окружности rotate(1.57rad)
    Обороты turn 1 угол полной окружности равен одному обороту rotate(.25turn)
    Илон Маск рекомендует:  LongDateFormat - Переменная Delphi

    Ниже показан пример правила таблицы стилей в котором используется такая же трансформация как и раньше, только с заданием другой единицы измерения:

    Масштабирование

    Для использования анимации масштабирования используется функция scale(). Значение масштаба задается относительно единицы: scale(2) — исходный элемент будет увеличен в два раза, scale(0.5) — элемент уменьшается в два раза. Согласно этим правилам элемент масштабируется одинаково во все стороны, но вы можете задать направление: X — по горизонтали, Y — по вертикали, Z — глубина масштабирования.

    Более того, функцию scale() можно использовать для создания эффекта отражения. Для этого нужно передать отрицательное значение в функцию scale(). Давайте рассмотрим некоторые примеры масштабирования. Для начала уменьшим нашу картинку с текстом в два раза:

    Теперь растянем элемент в два раза по оси X:

    Как видите здесь уже используется функция scaleX(), которая масштабирует элемент относительно оси X. И наконец, используем эффект отражения:

    Перемещение

    Для перемещения HTML-элемента используется функция translate(x,y), либо ее аналоги для конкретных осей translateX(x), translateY(y). Эти функции поддерживают отрицательные значения (сдвиг влево или вверх). Ниже показан пример использования трансформации перемещения:

    Искажение

    Трансформация skew() искажает форму элемента. Например, возьмем правильный прямоугольник с закрепленным основанием. Если мы начнем толкать его верхнюю часть в сторону, то она сместится, в то время как основание останется на месте. В результате получим параллелограмм:

    Значение искажения задается в градусах (можно указывать такие же единицы измерения, как и для трансформации поворота). Ниже показан пример использования трансформации искажения:

    Использование нескольких трансформаций

    Вы можете объединить несколько трансформаций двумя способами: указать несколько трансформаций в одном правиле, разделив их пробелами или использовать , которая позволяет комбинировать несколькими трансформациями с помощью математической матрицы. Более подробно о матричной трансформации вы можете прочитать на сайте разработчиков браузера Opera — CSS Transforms Matrix, а ниже мы рассмотрим пример группирования нескольких трансформаций в одном правиле:

    Сначала элемент увеличивается в полтора раза (используя трансформацию scale), потом перемещается на 10 пикселов влево (посредством трансформации translateX) и, наконец, наклоняется и поворачивается (используя трансформации skew и rotate).

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

    В 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.

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

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

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

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

    Она выглядит вот так:

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

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

    Copyright © 2010-2020 Русаков Михаил Юрьевич. Все права защищены.

    Понравилась статья? Поделиться с друзьями:
    Кодинг, CSS и SQL