Как развернуть картинку в css

Как повернуть изображение?

Для поворота изображения применяется свойство transform с функцией rotate() , внутри которой указываем угол поворота. В табл. 1 показаны разные варианты поворота картинки со значением угла.

Табл. 1. Углы поворота

Исходное изображение	rotate(90deg)	rotate(180deg)	rotate(-90deg)

В примере 1 показано добавление картинки со стрелкой и её поворот на 180 градусов.

Пример 1. Использование transform

.img-right

Результат данного примера показан на рис. 1. Используется класс img-right , который разворачивает картинку на 180 градусов, за счёт чего стрелка указывает влево.

Рис. 1. Поворот стрелки

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

См. также

rotate()

rotate() в CSS — это функция свойства transform , которая позволяет вращать элементы в 2D плоскости на указанный угол.

Синтаксис

 transform: rotate(45deg); 

Сразу же посмотрим, какой может быть результат анимации.

Задавая положительное число в скобках в rotate() , мы тем самым поворачиваем элемент по часовой стрелке, если отрицательное, тогда против часовой.

 transform: rotate(-45deg); 

Единицы измерения

Для того, чтобы задать угол вращения в rotate() можно использовать следующие единицы измерения.

• deg (градусы) — один полный оборот элемента вокруг оси будет равняться 360deg . Градусы интуитивно понятны, позволяют точно указать угол и вследствие этого более распространены.
• rad (радианы) — единица измерения угла, соответствующая дуге, длина которой равна её радиусу. Полный оборот соответствует 2π (360 градусов) или примерно 6.28318rad , соответственно 1π (180 градусов) это 3.14159rad . Радианы удобны при работе с тригонометрическими функциями и могут понадобиться при интеграции с некоторыми библиотеками.
• grad (градианы) — грады используются редко, здесь полной оборот (360 градусов) равен 400grad .
• turn (обороты) — один оборот равен 360 градусам, соответственно 0.5turn эквивалентно 180deg .

Центр вращения

По умолчанию rotate() вращает элемент вокруг его центра, но точку вращения можно изменить, воспользовавшись свойством transform-origin .

В данном примере точка устанавливается в верхнем левом углу:

 transform-origin: left top; 

Здесь в нижнем правом:

 transform-origin: bottom right; 

Также существуют и другие значения свойства transform-origin , которые дают возможность задать различные точки вращения.

Оси вращения

rotate() вращает элемент вокруг оси Z, однако для реализаций 3D-анимаций есть функции позволяющие вращать объекты по оси X и Y.

 transform: rotateX(90deg); 

 transform: rotateY(90deg); 

Также есть функция rotateZ() , которая эквивалента rotate() и чаще используется в 3D анимации, для лучшей читаемости кода, так как явно указывает на ось вращения.

Сочетание rotate() c другими функциями

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

 transform: rotate(90deg) skew(30deg) scale(1.5) translate(10px, 5px); 

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

Skypro — научим с нуля

Поворот изображения CSS

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

Картинке можно задать разный угол поворота с помощью генератора поворота элемента CSS, и скопировать уже готовый код.

Исходное изображение

transform: rotate(90deg);

transform: rotate(180deg);

transform: rotate(-90deg);

На примере показан поворот картинки на 45 градусов.

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

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

Отслеживать
110k 23 23 золотых знака 114 114 серебряных знаков 386 386 бронзовых знаков
задан 29 июн 2016 в 10:16
4,482 6 6 золотых знаков 42 42 серебряных знака 97 97 бронзовых знаков
что значит вращаться по кругу?
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,841 2 2 золотых знака 20 20 серебряных знаков 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
81.6k 9 9 золотых знаков 78 78 серебряных знаков 136 136 бронзовых знаков
спасибо! единственное, что @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
110k 23 23 золотых знака 114 114 серебряных знаков 386 386 бронзовых знаков

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

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

Похожие

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

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

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

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