Угол

Справочник:

Значение

Характеристики свойства

В каких браузерах работает?


9.0+	2.0+	11.1+	4.0+	3.6+	2.0+	2.0+

Для чего используется?

Этот тип значения сообщает угол поворота HTML-элемента. Для CSS допускается использовать 4 разных единицы измерения поворота:

градусы(deg) - наиболее распространенная и понятная форма изменения угла. Один оборот по этой шкале составит 360deg.
грады(grad) - более сложная система измерения угла. При таких единицах измерения оборот составляет 400grad.
радианы(rad) - единица измерения для тригонометрии, но программисты тоже могут ее использовать. Полный оборот по такой шкале равен двум числам Пи или 6.2832rad.
повороты(turn) - самая простая единица измерения, которая соответствует одному обороту.

Некоторые значения углов и их схема поворота

Синим цветом обозначен сектор, по дуге которого осуществляется поворот. При положительных значениях поворот осуществляется по часовой, при отрицательных - против.

90deg = 100grad = 0.25turn ≈ 1.5708rad
180deg = 200grad = 0.5turn ≈ 3.1416rad
270deg = 300grad = 0.75turn ≈ 4.7124rad
4-90deg = -100grad = -0.25turn ≈ -1.5708rad

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

Как правильно задавать?

CSS-правило: величина угла поворота;

Пример использования

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Угол</title>
  <style>
 
div{
	background:#47c3c8;
	-moz-transform: rotate(45deg); /* Для Firefox */
        -ms-transform: rotate(45deg); /* Для IE */
        -webkit-transform: rotate(45deg); /* Для Safari, Chrome, iOS */
        -o-transform: rotate(45deg); /* Для Opera */
        transform: rotate(45deg);
	display:block;
	width:200px;
	height:200px;
	margin: 50px auto;
   }
  </style>
 </head>
 <body>
  <div></div>
 </body>
</html>
</html>

По итогу получаем

Тип CSS свойства:

Позиционирование