Блог Vaden Pro

Все о самостоятельном создании и продвижении сайтов
Вы здесь

Угол

Справочник: 
Значение

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

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

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) - самая простая единица измерения, которая соответствует одному обороту.

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

Схема углов

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

  1. 90deg = 100grad = 0.25turn ≈ 1.5708rad
  2. 180deg = 200grad = 0.5turn ≈ 3.1416rad
  3. 270deg = 300grad = 0.75turn ≈ 4.7124rad
  4. 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 свойства: 
Позиционирование