Сегодня мы расскажем об альтернативных единицах измерения для трансформаций поворота. Они называются грады или гоны, а задаются добавлением размерности grad в конце значения функции после цифр. Обычная трансформация поворота CSS3 со всеми возможными приставками производителей выглядит так:

.example {
        -webkit-transform: rotate(360deg);
        -moz-transform: rotate(360deg);
        -o-transform: rotate(360deg);
        -ms-transform: rotate(360deg);
        transform: rotate(360deg);
}

Обратите внимание, что единица измерения, используемая для поворота элемента в этом примере, — это градус, которая задается добавлением размерности deg в конце значения функции после цифр.

Но градусы — не единственная доступная единица измерения для поворота элементов с помощью трансформаций. Можно использовать и другие единицы измерения, такие как грады, радианы и повороты.

Грады 

Единицы измерения грады, так же называемые гонами, задаются добавлением размерности grad в конце значения функции после цифр. В полном обороте 400 градов, что равняется 360 градусам. Так что пример выше, здесь и далее без приставок производителей, пересчитанный в грады, выглядит так:

.example {
        transform: rotate(400grad);
} 

Так как 400 — круглое число, возможно, эти единицы измерения могут быть удобнее для вычислений в уме.

Радианы 

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

.example {
transform: rotate(6.2831853rad);
}

В полном обороте 2π радиан. Если вы помните, что такое π или число Пи, то, возможно, вы также помните, что оно равняется 3,14 или более точно 3,14159265. Это ровно половина оборота в радианах. Так что удвоим это значение и получим 6,2831853 для полного оборота. Но в английском языке используется точка, а не запятая для отделения дробных частей чисел, так что записывается 6.2831853rad.

6,2831853 радианов равняется 400 градам и 360 градусам. Как Вы можете заметить, радианы не так удобны для разработчиков, как грады и градусы.

Оборот 

Единица измерения оборот означает именно то, что можно подумать: один полный оборот. Так что пример выше, переведенный в обороты, которые задаются добавлением размерности turn в конце значения функции после цифр, выглядит так:

.example {
transform: rotate(1turn);
}

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

Поддержка браузерами 

Эти альтернативные единицы измерения, как и градусы, относятся к атрибуту CSS <angle>.

Сейчас эти единицы измерения поддерживаются современными версиями всех основных браузеров, таких как: Chrome, Firefox, Safari, Opera и Internet Explorer от версии 10.

Посмотрите демонстрацию работы, в которой при использовании этих альтернативных единиц измерения при наведении указателя мыши поворачиваются квадраты:

Демонстрация работы

(Наведите указатель мыши на квадрат. Для поворота каждого квадрата используется своя единица измерения).

Автор урока Louis Lazaris

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

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

• Создание плавных анимаций с использованием состояния воспроизведения анимации
• Создание анимаций CSS с использованием единственного ключевого кадра
• Создание игры крестики-нолики с использованием только CSS