transform
Трансформирует элемент, в частности, позволяет его масштабировать, вращать, сдвигать, наклонять, а также комбинировать виды трансформаций.
Синтаксис
Значения
функция Функция трансформации. none Отменяет действие трансформации.
Функции трансформации
matrix
rotate
Поворот элемента на заданный угол относительно точки трансформации, задаваемой свойством transform-origin .
scale
Масштаб элемента по горизонтали и вертикали.
transform: scale(sx[, sy]);
Значение больше 1 увеличивает масштаб элемента, меньше 1 — уменьшает масштаб.
scaleX
Масштабирует элемент по горизонтали.
scaleY
Масштабирует элемент по вертикали.
skewX
Наклоняет элемент на заданный угол по вертикали.
skewY
Наклоняет элемент на заданный угол по горизонтали.
translate
Сдвигает элемент на заданное значение по горизонтали и вертикали.
transform: translate(tx[, ty])
translateX
Сдвигает элемент по горизонтали на указанное значение. Положительное значение сдвигает вправо, отрицательное влево.
translateY
Сдвигает элемент по вертикали на указанное значение. Положительное значение сдвигает вниз, отрицательное вверх.
HTML5 CSS3 IE Cr Op Sa Fx
transform 
В данном примере при наведении курсора на изображение оно поворачивается на 15 градусов по часовой стрелке.
Объектная модель
[window.]document.getElementById(» elementID «).style.transform
Браузеры
Internet Explorer 9 поддерживает нестандартное свойство -ms-transform .
Chrome, Safari, Android и iOS поддерживают нестандартное свойство -webkit-transform .
Opera до версии 12.10 поддерживает нестандартное свойство -o-transform .
Firefox до версии 16.0 поддерживает нестандартное свойство -moz-transform .
В чем измеряется единица измерения deg в CSS?
Я могу использовать значения у свойства трансформ
В нём задаются цифровые значения с припиской deg
пример — skewX(5deg)
Задавать значение в процентах или пикселях нельзя., а хотелось бы.
Что это за единица измерения и есть ли возможность использовать проценты вместо deg?
Голосование за лучший ответ
deg обычно расшифровывается как degree т. е. градусы.
Интересно, как ты угол в пикселях собрался указывать? Надеюсь, сколько градусов в окружности, говорить не надо. Если не нравятся градусы, можешь указать в радах )
ygi futУченик (1) 2 года назад
как записываются рады?
в чем их отличие от первого
Ordo Seclorum Оракул (58420) ygi fut, радиан, просто в css пишется rad https://ru.wikipedia.org/wiki/Радиан
задавать значения в пикселях можно. Но не для всех параметров. Например для translate можно применять px, %, vw и тд.
А для skew, rotate — градусы и радианы (deg, rad)
Deg css что это
Тип данных CSS представляет собой значение угла, выраженное в градусах, градах, радианах или оборотах. Он используется, например, в (en-US) и в некоторых функциях transform .
Интерактивный пример
Синтаксис
Опционально перед числом может стоять знак + или — . Положительное значение отмеряется по часовой стрелке, а отрицательные – против часовой. Чтобы достичь статистических свойств, каждый угол может быть представлен разными значениями, эквивалентными друг другу. Например, 90deg равняется -270deg , а 1turn равняется 4turn . Тем не менее, для достижения динамических свойств эффект будет другим. Например, при применении animation или transition .
Единицы измерения
Представляет угол в градусах. Один полный круг равен 360deg . Например: 0deg , 90deg , 14.23deg .
Представляет угол в градах. Один полный круг равен 400grad . Например: 0grad , 100grad , 38.8grad .
Представляет угол в радианах. Один полный круг равен 2π или примерно 6.2832rad . 1rad — это 180/π градусов. Например: 0rad , 1.0708rad , 6.2832rad .
Представляет угол в количестве оборотов. Один полный круг равен 1turn . Например: 0turn , 0.25turn , 1.2turn .
Примеры
 |
Прямой угол: 90deg = 100grad = 0.25turn ≈ 1.5708rad |
|---|---|
 |
Развёрнутый угол: 180deg = 200grad = 0.5turn ≈ 3.1416rad |
 |
Прямой угол (против часовой стрелки): -90deg = -100grad = -0.25turn ≈ -1.5708rad |
 |
Нулевой угол: 0deg = 0grad = 0turn = 0rad |
Спецификации
| Specification |
|---|
| CSS Values and Units Module Level 4 # angles |
Совместимость с браузерами
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 5 дек. 2023 г. by MDN contributors.
Your blueprint for a better internet.
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 6 янв. 2024 г. 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– 2024 by individual mozilla.org contributors. Content available under a Creative Commons license.