Главная » Полезные статьи » HTML-верстка » Альтернативные единицы измерения для трансформации-вращения в CSS3
Распечатать статью

Альтернативные единицы измерения для трансформации-вращения в CSS3

Альтернативные единицы измерения для трансформации вращения в CSS3

Стандартный код трансформации-вращения, учитывая основные браузеры, выглядит следующим образом:

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


Как Вы можете видеть, благодаря сокращению, стоящему в скобках после числового значения (…deg), единицей измерения угла поворота для каждого из элементов являются градусы.

Но градусы не единственная единица измерения для вращения элементов. В Вашем распоряжении есть также и другие единицы, такие как градианы, радианы и обороты.

 

Градианы (grad)

Градианы (также встречаются как грады и гоны) в коде сокращаются до “grad” . Полный круг состоит из 400 град, что является эквивалентом 360 градусам. Таким образом, если переписать код с использованием градиан – получим следущее (вендорные префиксы опущены для этого и всех следующих примеров)

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

Так как 400 – это красивое круглое число, возможно экспериментировать с этой величиной станет для Вас проще и, как результат, ускорит все производимые вычисления.

Радианы (rad)

Радианы или rad записываются следующим образом:

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

Полный круг состоит из 2π радиан. Как Вы знаете, число π равняется 3. 14, или, если быть более точным, 3.14159265, что в свою очередь равняется половине окружности с точки зрения радиан. Таким образом, чтобы получить полный круг, мы удваиваем это значение и получаем 6.2831853 радиан, т.е. целый круг.

Следовательно, 6.2831853rad = 400grad = 360deg. Как Вы можете убедиться работать с радианами не так удобно как с градами или даже с градусами.

Обороты (turn)

Единицы измерения «turn» (обороты) соответствуют своему названию. Один полный оборот. Таким образом, эквивалент того, что мы делали ранее в оборотах будет выглядеть так:

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

Это, пожалуй, самая интуитивно понятная величина, так как она равняется одному полному обороту.

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

Все эти альтернативные единицы измерения (включая градусы) являются частью CSS-данных типа «угол».

Как показали мои эксперименты с последними стабильными версиями таких браузеров как Chrome, Safari, и Opera – все они поддерживают эти единицы измерения. Firefox поддерживает радианы и градианы, но не поддерживает обороты. А вот Internet Explorer (тестировалось в IE10 PP2) не поддерживает ни одну из трех единиц измерения.

Примечание: Как было уже отмечено в комментариях, последнее обновление IE10PP добавило полную поддержку данных единиц измерения, также как и в случае с aurora build для Firefox.

Я создал демо-страницу с вращающимися блоками, которые приводятся в движение при наведении на них курсора, используя все три альтернативные единицы.

Источник:  css-live.ru
Вы можете оставить комментарий, или обратную ссылку на Ваш сайт.

Оставить комментарий

Похожие статьи