Функция rotate
В данном примере блок повернут на 30 градусов по часовой стрелке:
#elem < transform: rotate(30deg); border: 1px solid black; width: 100px; height: 50px; >
Пример
В данном примере блок повернут на 30 градусов против часовой стрелки:
#elem < transform: rotate(-30deg); border: 1px solid black; width: 100px; height: 50px; >
Пример
В данном примере блок по наведению повернется на 1 оборот, так как значение поворота задано в 1turn (такого же эффекта можно добиться, если задать угол поворота в 360deg ). Для плавности поворота добавлено свойство transition :
#elem < border: 3px solid black; width: 100px; height: 50px; transition: transform 3s linear; >#elem:hover < transform: rotate(1turn); >
Смотрите также
- функцию rotateX ,
которая задает поворот по оси X - функцию rotateY ,
которая задает поворот по оси Y - функцию rotateZ ,
которая задает поворот по оси Z - функцию rotate3d ,
которая задает поворот по трем осям
Как перевернуть элемент css
Чтобы перевернуть элемент с помощью CSS, вы можете использовать свойство transform . С помощью этого свойства можно изменять размер, поворачивать и трансформировать элементы.
Например, для переворачивания элемента вверх ногами, вы можете использовать функцию rotate и установить значение в 180 градусов:
img transform: rotate(180deg); > Если вы хотите перевернуть элемент в другом направлении, вы можете изменить значение угла. Например, если вы хотите перевернуть элемент по вертикали, вы можете использовать функцию scaleY и установить значение в -1. Например:
div transform: scaleY(-1); > Это перевернет содержимое div по вертикали.
rotate()
Функция CSS rotate () определяет преобразование, которое перемещает элемент вокруг неподвижной точки (как определено свойством transform-origin (en-US), не деформируя его. Количество движения определяется заданным углом; если положительно, движение будет по часовой стрелке, если оно отрицательное, оно будет против часовой стрелки. Вращение на 180 ° называется точечным отражением.
Синтаксис
rotate(a)
Значения
| Декартовы координаты на ℝ 2 | Однородные координаты на ℝℙ 2 | Декартовы координаты на ℝ 3 | Однородные координаты на ℝℙ 3 |
|---|---|---|---|
| cos(a) -sin(a) sin(a) cos(a) | cos(a) -sin(a) 0 sin(a) cos(a) 0 0 0 1 | cos(a) -sin(a) 0 sin(a) cos(a) 0 0 0 1 | cos(a) -sin(a) 0 0 sin(a) cos(a) 0 0 0 0 1 0 0 0 0 1 |
| [cos(a) sin(a) -sin(a) cos(a) 0 0] |
Примеры
Базовый пример
HTML
div>Normaldiv> div class="rotated">Rotateddiv>
CSS
div width: 80px; height: 80px; background-color: skyblue; > .rotated transform: rotate(45deg); /* Equal to rotateZ(45deg) */ background-color: pink; >
Result
Объединение вращения с другим преобразованием
Если вы хотите применить к элементу несколько преобразований, будьте осторожны с порядком, в котором вы указываете свои преобразования. Например, если вы вращаете перед сдвигом, сдвиг произойдёт относительно новой оси вращения!
HTML
div>Normaldiv> div class="rotate">Rotateddiv> div class="rotate-translate">Rotated + Translateddiv> div class="translate-rotate">Translated + Rotateddiv>
CSS
div position: absolute; left: 40px; top: 40px; width: 100px; height: 100px; background-color: lightgray; > .rotate background-color: transparent; outline: 2px dashed; transform: rotate(45deg); > .rotate-translate background-color: pink; transform: rotate(45deg) translateX(180px); > .translate-rotate background-color: gold; transform: translateX(180px) rotate(45deg); >
Result
Спецификации
| Specification |
|---|
| CSS Transforms Module Level 1 # funcdef-transform-rotate |
Поддержка браузерами
BCD tables only load in the browser
Смотрите также
Found a content problem with this page?
- Edit the page on GitHub.
- Report the content issue.
- View the source on GitHub.
This page was last modified on 3 авг. 2023 г. by MDN contributors.
Your blueprint for a better internet.
MDN
Support
- Product help
- Report an issue
Our communities
Developers
- Web Technologies
- Learn Web Development
- MDN Plus
- Hacks Blog
- Website Privacy Notice
- Cookies
- Legal
- Community Participation Guidelines
Visit Mozilla Corporation’s not-for-profit parent, the Mozilla Foundation.
Portions of this content are ©1998– 2023 by individual mozilla.org contributors. Content available under a Creative Commons license.
Javascript метод rotate()
Метод rotate() позволяет поворачивать текущий графический объект.
Примечание: Чтобы графический объект был повернут, метод rotate() необходимо применить до того, как объект будет нарисован.
| JavaScript синтаксис: | context.rotate(угол); |
Значения параметров
| Параметр | Описание |
|---|---|
| угол | Угол поворота в радианах. Чтобы пересчитать градусы в радианы, следует воспользоваться следующей формулой: градусы*Math.PI/180. Например: чтобы повернуть на 5 градусов, проведем следующее вычисление: 5*Math.PI/180 |
Пример использования
Повернем прямоугольник на 20 градусов:
Ваш браузер не поддерживает HTML5 тег canvas.
var c=document.getElementById("myCanvas"); var ctx=c.getContext("2d"); ctx.rotate(20*Math.PI/180); ctx.fillRect(50,20,100,50);