Единицы измерения углов, времени и частоты

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

Список новых единиц измерения

CSS поддреживает следующие типы единицы измерения углов, времени и частоты

deg: Градус
grad: Градиан (град)
rad: Радиан
turn: Оборот
ms: Миллисекунда
s: Секунда
Hz: Герц
kHz: Килогерц

Исходным значением для угла, времени и частоты является 0, и все значения интерпретируются как числа с плавающей точкой. При записи любой из этих единиц измерения нужно обязательно включать соответствующее сокращение (см. список выше). В отличие от единиц измерения длины, пропуск единицы измерения углов, времени и частоты в CSS недопустим, и такое объявление будет проигнорировано.

Единицы измерения углов

Единицами измерения углов являются градусы, градианы, радианы и обороты.

Углы

Диапазон углов составляет от 0 до 360°, и оба этих значения равны друг другу. Положительные углы отсчитываются по часовой стрелке, а отрицательные — против нее. Например, значение –90 deg равно четверти окружности против хода часовой стрелки и задает поворот влево. А значение 90 deg задаст поворот на 90° по часовой стрелке.

.deg {
    transform: rotate(-30deg);
}

Грады

Град, или градиан, эквивалентен 1/400 полной окружности. Как и в случае с градусами, положительное значение града будет отсчитываться по часовой стрелке, а отрицательное — против нее. 100 градов будут представлены прямым углом 90°.

Рады

Рад, или радиан, равен 180°/π, или примерно 57,3°. Окружность составляет 2π радиана. Угол в 1 радиан на окружности соответствует дуге, длина которой равна радиусу окружности. Значение 1.570796326794897 rad равно 100 град или 90 deg.

.rad {
    transform: rotate(1rad);
}

Обороты

Оборот равен 360 deg. Например, 2 turn = 720 deg. Учтите, что слово turn пишется здесь в единственном числе и между числом и названием единицы измерения нет пробела.

.turn2 {
    transform: rotate(1.8turn);
}

Время

Единицы измерения времени объяснить значительно проще, чем радианы! Существуют две единицы измерения: секунды (s) и миллисекунды (ms). 1000 мс составляют 1 с. Форматом значения времени является число, за которым следует s для секунд, или ms для миллисекунд. Как и все прочие единицы измерения, не относящиеся к длине, они предполагают обязательное включение s или ms, даже при нулевом значении. Следующие строки являются равнозначными:

.sec {
    animation-duration: 0.5s;
    animation-duration: 500ms;
}

Частота

Значения частоты используются в звуковых (или речевых) каскадных таблицах стилей. Для этих значений существуют две единицы измерения: Hz (герцы) и kHz (килогерцы). 1000Hz = 1kHz (регистр символов роли не играет). Частота может использоваться для изменения высоты голоса при чтении текста. Низкая частота соответствует басу, а высокая — дисканту.