Как сделать анимацию вращения в css

Вращение картинки по кругу на css

Как заставить её вращаться по кругу на одном месте по часовой стрелке — в положении 180 градусов смайл становится перевернутым) желательно на css ?

Отслеживать
109k 23 23 золотых знака 112 112 серебряных знаков 374 374 бронзовых знака
задан 29 июн 2016 в 10:16
4,488 6 6 золотых знаков 38 38 серебряных знаков 93 93 бронзовых знака
что значит вращаться по кругу?
29 июн 2016 в 10:17
@Grundy по часовой стрелке переворачиваться
29 июн 2016 в 10:19
на одном месте? просто крутиться?
29 июн 2016 в 10:20
@Grundy да все правильно как колесо на одном месте
29 июн 2016 в 10:21

3 ответа 3

Сортировка: Сброс на вариант по умолчанию

img.rot < animation: 1s linear 0s normal none infinite running rot; -webkit-animation: 1s linear 0s normal none infinite running rot; width: 100px; >@keyframes rot < 0% < transform: rotate(0deg); >100% < transform: rotate(360deg); >> @-webkit-keyframes rot < 0% < transform: rotate(0deg); >100% < transform: rotate(360deg); >>

Анимация по шагам))

Отслеживать
ответ дан 29 июн 2016 в 10:22
Jean-Claude Jean-Claude
5,830 2 2 золотых знака 19 19 серебряных знаков 45 45 бронзовых знаков
да, вот так! супер! спасибо
29 июн 2016 в 10:23
именно так и устроена анимация у font-awesome
25 июл 2016 в 9:43

Подскажите , тут картинка крутиться слева направо , а как сделать наоборот ? что бы изображение крутилось справа налево ?

21 янв 2020 в 15:59
@ArnoldжеFree поменять местами 0 и 360
21 янв 2020 в 16:06

Можно воспользоваться свойством animation

Которому можно задать анимацию, описанную в @keyframes, а так же настройки анимации: продолжительной одной итерации, задержка перед запуском, количество повторений и т.д.

@keyframes spin < from to > img

Отслеживать
ответ дан 29 июн 2016 в 10:26
80.8k 9 9 золотых знаков 78 78 серебряных знаков 134 134 бронзовых знака
спасибо! единственное, что @Jean-Claude написал первым
29 июн 2016 в 10:35
@Вася, ага, я долго описание смотрел 🙂 поэтому добавил его, чтобы было где дальше смотреть
29 июн 2016 в 10:36

Анимация вращения при наведении курсора

img < border-radius: 50%; -webkit-transition: -webkit-transform .8s ease-in-out; transition: transform .8s ease-in-out; >img:hover

Отслеживать
ответ дан 11 янв 2021 в 19:53
Alexandr_TT Alexandr_TT
109k 23 23 золотых знака 112 112 серебряных знаков 374 374 бронзовых знака

• html
• css
• jquery
• css3
• анимация

Важное на Мете

Похожие

Подписаться на ленту

Лента вопроса

Для подписки на ленту скопируйте и вставьте эту ссылку в вашу программу для чтения RSS.

Дизайн сайта / логотип © 2023 Stack Exchange Inc; пользовательские материалы лицензированы в соответствии с CC BY-SA . rev 2023.11.15.1019

Нажимая «Принять все файлы cookie» вы соглашаетесь, что Stack Exchange может хранить файлы cookie на вашем устройстве и раскрывать информацию в соответствии с нашей Политикой в отношении файлов cookie.

2D трансформации. Вращение — CSS: Transform (трансформация объектов)

Вращение объекта на странице — без преувеличения одна из самых полезных функций при разработке анимаций и не только. Этот эффект, будучи простым в понимании, содержит некоторые хитрости, о которых не стоит забывать во время разработки шаблона.

Вращение объекта достигается путём использования функции rotate() свойства transform . В отличие от функции перемещения, вращение не может быть описано пикселями, процентами и другими привычными единицами измерения. Для вращения объекта используются специальные «угловые» единицы, среди которых:

• deg — Градусы. Знакомая многим единица измерения, по которой можно указать, на какой угол повернуть объект относительно его начального положения .
• grad — Градианы. Отличительной особенностью такой единицы является количество град на один квадрант — 100. То есть полный круг описывается в 400 град.
• rad — Радианы. Мера, при которой за одну единицу принимается угол дуги, длина которой равна радиусу окружности.
• turn — Оборот. Количество оборотов окружности, где единица равна одному полному обороту.

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

Важно: для вращения объекта по часовой стрелке используются положительные значения функции rotate()

Взгляните на наложение элементов. Изменив положение в пространстве, они не стали занимать «особое» положение в потоке документов. Для потока с этими элементами ничего и не случалось. То место, в котором они находились до трансформации всё так же зарезервировано и не занимается другими элементами. Это же пространство так же не изменяется вне зависимости от значений свойства transform . Такое поведение обеспечивает корректность отображения страницы браузерами на случай, если они не поддерживают свойство transform .

Как и с перемещением, функция rotate() не является единственной функцией для поворота элемента. Существует еще несколько:

• rotateX()
• rotateY()
• rotateZ()

Про rotateZ() и похожие функции будет подробнее рассказано в темах, посвящённых 3D трансформациям. Работа двух других функций в двумерной области может поначалу запутать. Как это вращать объект только по одной оси? Ответ на этот вопрос будет ближе к концу урока. А сейчас стоит понять, как именно вращаются элементы и можно ли управлять точкой, вокруг которой и произойдёт вращение.

Точка вращения

Если вы попробуете вращать любой HTML-элемент на странице, то cможете заметить, что браузер за точку вращения устанавливает центр элемента. Именно вокруг этой точки и происходит всё вращение. Это позволяет не выходить объекту за пределы своего изначального положения и является самым интуитивным способом. Скорее всего, мысленно, вы сможете перевернуть объект на 90 градусов по часовой стрелке и, еще до трансформации, определить конечный результат преобразования.

В следующих примерах ось вращения будет обозначена тёмной точкой в квадрате. Следите за тем, как вращается элемент, но не поддавайтесь гипнозу 🙂

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

• Одно значение: устанавливается точка по оси x. Значение по оси y будет равняться center
• Два значения: устанавливаются точки по оси x и по оси y

В качестве значений могут выступать проценты или специальные ключевые слова top, right, bottom, left, center. Добавим для квадрата из примера выше в качестве точки вращения левый верхний угол. Этого можно добиться двумя способами:

• transform-origin: left top
• transform-origin: 0% 0%

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

Обратите внимание на последний пример. В нём точка вращения вынесена за пределы самого объекта. Таким образом создается эффект, что объект перемещается не по определённой точке вращения, а вокруг неё. Попробуйте изменять значения, чтобы убедиться в понимании точки вращения объекта.

Вращение по одной оси

В самом начале урока говорилось о том, что существуют еще две функции для вращения 2D объектов:

Как можно вращать двумерный объект по одной из осей? Добавим вращение по оси x на 360 градусов c точкой вращения по центру

Для большей наглядности на объекте используется градиент. Во время изучения трехмерных объектов станет понятнее, что происходит с двумерным объектом. Он действительно крутится только по одной оси. В данном случае наклоняясь вперёд и проходя под осью x. Это похоже на качели, которые раскручивают «солнышком», только мы не видим глубину объекта. Вращение по оси y работает по тому же принципу, только визуально объект будет вращаться вокруг вертикальной оси.

У двумерных объектов нет глубины, и именно поэтому визуально происходит скорее деформация объекта, чем его вращение. Такой принцип можно использовать при создании небольших анимаций. Например, используя :hover на кнопке можно изменить угол её положения относительно пользователя. Похожим приёмом можно добиться эффекта трехмерности в двумерной плоскости. Подробнее об анимации будет в следующих курсах, но этот пример уже можно взять на вооружение для создания простых анимаций интерфейсов.

Дополнительное задание

Используя последний пример с кнопкой, попробуйте изученные свойства трансформации, чтобы увидеть, как будет вести себя объект при наведении. Скорость трансформации можно изменить в свойстве transition .

Полезные ссылки

Открыть доступ

Курсы программирования для новичков и опытных разработчиков. Начните обучение бесплатно

• 130 курсов, 2000+ часов теории
• 1000 практических заданий в браузере
• 360 000 студентов

Наши выпускники работают в компаниях:

Анимация вращения на CSS

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

Пример

HTML

CSS

 .animation-bg < display: flex; justify-content: center; align-items: center; background: #042548; height: 350px; >.img-rotation < width: 200px; -webkit-animation-name: rotation; -webkit-animation-duration: 15s; -webkit-animation-iteration-count: infinite; -webkit-animation-timing-function: linear; -moz-animation-name: rotation; -moz-animation-duration: 15s; -moz-animation-iteration-count: infinite; -moz-animation-timing-function: linear; -o-animation-name: rotation; -o-animation-duration: 15s; -o-animation-iteration-count: infinite; -o-animation-timing-function: linear; animation-name: rotation; animation-duration: 15s; animation-iteration-count: infinite; animation-timing-function: linear; >@-webkit-keyframes rotation < 0% 100% > @-moz-keyframes rotation < 0% 100% > @-o-keyframes rotation < 0% 100% > @keyframes rotation < 0% 100% > 

Анимация CSS (transform:rotate) Вращаем объект на CSS

В этом уроке я покажу как использовать анимацию CSS для вращения объекта на 360 градусов. (transform:rotate (360deg)). Нажав просмотр Вы увидите что планета вращается вокруг своей оси.

Начнем. Я создал простую страницу HTML 5 для примера. Кстати, меню тоже создано с использованием HTML 5.

Структура html

 
Home 
About 
Portfolio 
Blog 
Contact  
 

Сначала идет контейнер div (earth) — это и есть объект нашего урока (анимация CSS). Следующий блок div это логотип. И последним идет блок меню HTML 5 с тегом .

.earth < background: url('earth3.png'); position:absolute; width: 500px; height: 472px; top: -130px; margin-left: 50%; -webkit-transform: rotate(360deg); -moz-transform: rotate(360deg); -ms-transform: rotate(360deg); -o-transform: rotate(360deg); transform: rotate(360deg); -moz-animation-name: earth; -moz-animation-duration: 77s; -webkit-animation-name: earth; -webkit-animation-duration: 77s; -moz-animation-timing-function: linear; -moz-animation-iteration-count: infinite; -moz-animation-direction: normal; -moz-animation-delay: 0; -moz-animation-play-state: running; -moz-animation-fill-mode: forwards; -webkit-animation-timing-function: linear; -webkit-animation-iteration-count: infinite; -webkit-animation-direction: normal; -webkit-animation-delay: 0; -webkit-animation-play-state: running; -webkit-animation-fill-mode: forwards; >@-webkit-keyframes earth < 0% < -moz-transform: rotate(0deg); -webkit-transform: rotate(0deg); >100% < -moz-transform: rotate(360deg); -webkit-transform: rotate(360deg); >> @-moz-keyframes earth < 0% < -moz-transform: rotate(0deg); -webkit-transform: rotate(0deg); >100% < -moz-transform: rotate(360deg); -webkit-transform: rotate(360deg); >>