- Все для CMS | Joomla, Drupal, phpBB, Wordpress, DLE, IPB - http://cmsart.ru -

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

Posted By Archi On 19.06.2012 @ 12:42 дп In HTML-верстка | No Comments

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

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

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


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

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

 

Градианы (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-данных типа «угол» [3].

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

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

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

Источник:  css-live.ru [5]

Article printed from Все для CMS | Joomla, Drupal, phpBB, Wordpress, DLE, IPB: http://cmsart.ru

URL to article: http://cmsart.ru/articles/html-articles/alternativnyie-edinitsyi-izmereniya-dl

URLs in this post:

[1] трансформации-вращения: http://cmsart.ru/goto/http://css3clickchart.com/#rotate-transform

[2] другие единицы: http://cmsart.ru/goto/http://dev.w3.org/csswg/css3-values/#other-units

[3] CSS-данных типа «угол»: http://cmsart.ruhttp://cmsart.ru/goto/https://developer.mozilla.org/en/CSS/angle

[4] aurora build: http://cmsart.ru/goto/http://www.mozilla.org/en-US/firefox/all-aurora.html

[5] css-live.ru: http://cmsart.ru/?goto=http%3A%2F%2Fcss-live.ru

Copyright © 2012 Поддержка CMS | Документация, статьи по Joomla, Drupal, phpBB. All rights reserved.