Яндекс.Метрика

Дизайн-журнал №1. Актуальная информация для дизайнеров, веб дизайнеров, программистов и разработчиков сайтов.

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

6 августа 2016 | Опубликовано в css | 2 Комментариев »

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

 

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

Единица измерения Значения
deg градусы
rad радианы
grad грады
turn обороты

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

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

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




Комментарии

Оставить ответ


6 − = пять

Вставить изображение