rotate()
Baseline
Widely available
This feature is well established and works across many devices and browser versions. Itâs been available across browsers since иÑÐ»Ñ 2015 г..
ФÑнкÑÐ¸Ñ CSS rotate () опÑеделÑÐµÑ Ð¿ÑеобÑазование, коÑоÑое пеÑемеÑÐ°ÐµÑ ÑÐ»ÐµÐ¼ÐµÐ½Ñ Ð²Ð¾ÐºÑÑг неподвижной ÑоÑки (как опÑеделено ÑвойÑÑвом transform-origin, не деÑоÑмиÑÑÑ ÐµÐ³Ð¾. ÐолиÑеÑÑво Ð´Ð²Ð¸Ð¶ÐµÐ½Ð¸Ñ Ð¾Ð¿ÑеделÑеÑÑÑ Ð·Ð°Ð´Ð°Ð½Ð½Ñм Ñглом; еÑли положиÑелÑно, движение бÑÐ´ÐµÑ Ð¿Ð¾ ÑаÑовой ÑÑÑелке, еÑли оно оÑÑиÑаÑелÑное, оно бÑÐ´ÐµÑ Ð¿ÑоÑив ÑаÑовой ÑÑÑелки. ÐÑаÑение на 180 ° назÑваеÑÑÑ ÑоÑеÑнÑм оÑÑажением.
СинÑакÑиÑ
rotate(a)
ÐнаÑениÑ
- a
-
ЯвлÑеÑÑÑ
<angle>, пÑедÑÑавлÑÑÑим Ñгол повоÑоÑа. ÐоложиÑелÑнÑй Ñгол обознаÑÐ°ÐµÑ Ð²ÑаÑение по ÑаÑовой ÑÑÑелке, а оÑÑиÑаÑелÑнÑй - пÑоÑив ÑаÑовой ÑÑÑелки.
| ÐекаÑÑÐ¾Ð²Ñ ÐºÐ¾Ð¾ÑдинаÑÑ Ð½Ð° â2 | ÐдноÑоднÑе кооÑдинаÑÑ Ð½Ð° ââ2 | ÐекаÑÑÐ¾Ð²Ñ ÐºÐ¾Ð¾ÑдинаÑÑ Ð½Ð° â3 | ÐдноÑоднÑе кооÑдинаÑÑ Ð½Ð° ââ3 |
|---|---|---|---|
[cos(a) sin(a) -sin(a) cos(a) 0 0] |
ÐÑимеÑÑ
ÐазовÑй пÑимеÑ
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 |