rotate()
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since September 2015.
Функция CSS rotate () определяет преобразование, которое перемещает элемент вокруг неподвижной точки (как определено свойством transform-origin
, не деформируя его. Количество движения определяется заданным углом; если положительно, движение будет по часовой стрелке, если оно отрицательное, оно будет против часовой стрелки. Вращение на 180 ° называется точечным отражением.
Синтаксис
rotate(a)
Значения
Примеры
Базовый пример
HTML
<div>Normal</div>
<div class="rotated">Rotated</div>
CSS
div {
width: 80px;
height: 80px;
background-color: skyblue;
}
.rotated {
transform: rotate(45deg); /* Equal to rotateZ(45deg) */
background-color: pink;
}
Result
Объединение вращения с другим преобразованием
Если вы хотите применить к элементу несколько преобразований, будьте осторожны с порядком, в котором вы указываете свои преобразования. Например, если вы вращаете перед сдвигом, сдвиг произойдёт относительно новой оси вращения!
HTML
<div>Normal</div>
<div class="rotate">Rotated</div>
<div class="rotate-translate">Rotated + Translated</div>
<div class="translate-rotate">Translated + Rotated</div>
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