Сегодняшний урок CSS будет интересен тем, кто хочет глубже изучить свойства единиц измерения CSS. На самом деле с их помощью можно сделать намного больше, чем кажется на первый взгляд. К примеру, кроме линейных единиц измерения, с помощью CSS можно задавать углы и изменения, связанные со временем. И ниже речь пойдет именно об этом.

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

Изначально все эти единицы измерения, кроме поворотов, были связаны со звуковыми таблицами стилей: стилями, созданными для управления произношением слов синтезаторами речи на веб-страницах. Сейчас они ,больше всего ассоциируются с трансформациями CSS.

• Единица измерения градус очевидна. Положительные значения поворачивают элемент по часовой стрелке, а отрицательные — против:

@animation sway { 
    to { transform: rotate(15deg); }
}

• Единица измерения радиан — угол, соответствующий дуге окружности, длина которой равна её радиусу, 1 радиан равен 57.295 градусов или 1⁄(2π). Широко используется в математике, где у нее есть значительные удобства для вычислений.

Отображение единицы измерения радиан, изображение с сайта Википедия

• Единица измерения град — угол, равный 9/10 градуса. Полный круг состоит из 400 градов, что делает вычисление некоторых углов простым: 90° это 100 градов, 180° это 200 градов и так далее.

•  Единица измерения оборот — вероятно, наиболее интуитивно понятная единица измерения углов: 1 оборот равен 360°, .0,25 оборотов это 90° и так далее. Может быть удобен в анимациях CSS. Обратите внимание, что во множественном числе в CSS записывается так же, как в единственном: 2turn.

@animation sway {
    to { transform: rotate(.5turn); }
}

Кроме того, для углов нужно всегда задавать их единицы измерения, например, запись transform: rotate(45) не сработает, если значение не 0.

Единицы измерения времени 

Единицы измерения времени довольно понятны: s означает всем известную секунду, а ms это 1/1000 секунды. Секунды можно записывать как числа с плавающей точкой; не требуется лидирующий нуль, если значение меньше единицы.

#spinner { transition: .5s; }

Что соответствует:

#spinner { transition: 500ms; }

Значения времени должны всегда быть положительными.

Единицы измерения частоты 

Герцы Hz и КилоГерцы KHz также поддерживаются в CSS, изначально они использовались для задания высоты синтезированного голоса для чтения текста веб-страницы. Для справки, диапазон слуха человека примерно от 64Hz до 22000Hz, от очень низкого баса до очень высокого визга, прямо на нижней границе ультразвука.

Автор урока Dudley Storey

Перевод — Дежурка

Смотрите также:

• Обзор новых относительных единиц измерения шрифтов CSS3 
• Использование альтернативных единиц измерения для трансформаций поворота CSS3
• Создание упрощенной анимации печати с использованием единицы измерения ch