Что можно трансформировать — css3

Существует две группы доступных CSS3-трансформаций: 2D и 3D. 2D-варианты намного более широко реализованы, поддерживаются браузерами и, несомненно, более просты в написании, поэтому сначала взглянем на них. CSS3 2D Transforms Module позволяет использовать следующие трансформации:

scale — применяется для масштабирования элементов (чтобы делать их больше или меньше);

translate — дает возможность сдвигать элементы на экране (вверх, вниз, влево и вправо);

rotate — позволяет поворачивать элементы на заданную величину (определяемую в градусах);

skew — используется для скашивания элементов по осям координат X и Y;

matrix — позволяет смещать элементы и задавать форму их трансформаций с точностью до пиксела.

Попробуем каждую из этих трансформаций и посмотрим, каких результатов можно добиться.

Scale.

Мы уже рассматривали эту трансформацию ранее. Тогда мы задавали положительные значения. Однако вам следует знать, что, применяя значения меньше 1, можно уменьшать элементы (рисунок 7.5). Приведенный далее код позволит уменьшить элемент наполовину:

Transform: scale (0.5);

При наведении указателя мыши ссылка уменьшается

Translate.

Transform: translate (40px, 0px);

Команда translate дает браузеру указание сдвинуть соответствующий элемент на величину, определяемую либо в пикселах, либо в процентах. Этот синтаксис будет применяться так: сначала элемент сдвинется слева направо (на 40 пикселов в нашем случае), а затем сверху вниз (на 0 пикселов в нашем случае, благодаря чему он останется на одной линии с прочими навигационными элементами). Положительные значения, указанные в скобках, приводят к сдвигу элемента вправо или вниз, а отрицательные — к сдвигу элемента влево или вверх. Таким образом, в результате применения этого объявления к навигационной ссылке в выделенном состоянии она сдвинется на 40 пикселов вправо, когда пользователь наведет на нее указатель мыши (рисунок 7.6).

При наведении указателя мыши ссылка сдвигается вправо

Rotate.

Transform: rotate (90deg);

Команда rotate позволяет поворачивать элементы. В этом примере мы заставили ссылку поворачиваться на 90° при наведении на нее указателя мыши. На рисунке 7.7 показано, как все это будет выглядеть в браузере.

При наведении указателя мыши ссылка поворачивается

Значение в скобках всегда следует указывать в градусах (например, 90deg). Однако это не помешает вам посумасбродничать — вы можете заставить элементы вращаться, указав значение вроде следующего:

Transform: rotate (3600deg);

В результате элемент будет совершать десять полных оборотов. Случаи практического использования этого конкретного значения встречаются редко, однако, если вам когда-нибудь доведется заниматься дизайном сайтов для компаний, деятельность которых связана с ветряными установками, то оно может прийтись кстати!

Skew.

Если у вас есть кое-какой опыт работы в Photoshop, то вы хорошо сможете представить, что делает skew. Трансформация skew позволяет скашивать элементы по обеим осям либо по одной из них.

Transform: skew (10deg, 2deg);

Применение этого кода к ссылке приведет к следующему результату (рисунок 7.8).

Первое значение — это угол скоса элемента по оси X (10deg в нашем примере), а второе (2deg) — угол скоса элемента по оси Y. Если не указать второе значение,

При наведении указателя мыши ссылка перекашивается

То по оси X (по горизонтали) будет применен скос произвольной величины. Например:

Transform: skew (10deg);

Этот код абсолютно правильный, однако он обеспечит скашивание элемента только по оси X. Значения обязательно нужно указывать в градусах. Положительные значения всегда приводят к вращению элемента по часовой стрелке, а отрицательные — против часовой стрелки.

Matrix.

Вернемся к вопросу о слишком переоцененных фильмах. Что такое? Вы хотите узнать о CSS3-трансформации matrix, а не о фильме с одноименным названием? Ох, ну ладно.

Синтаксис трансформации matrix выглядит пугающе:

Transform: matrix (1.678, -0.256, 1.522, 2.333, -51.533, -1.989);

По сути, вы можете объединять ряд отличающихся трансформаций (scale, rotate, skew и т. д.) в одно объявление. Приведенное чуть выше объявление обеспечит в браузере следующий эффект (рисунок 7.9).

При наведении указателя мыши к ссылке применяется несколько трансформаций.

Я люблю справляться с самыми сложными задачами (если только речь не идет о том, чтобы высидеть до конца фильма «Мулен Руж»), однако уверен, что вы согласитесь с тем, что попытка разобраться в данном синтаксисе может превратиться в настоящее испытание. Все станет еще хуже, когда вы заглянете в спецификацию и осознаете, что для его полного понимания потребуется хорошее знание математики: http://www.w3.org/TR/css3-2d-transforms/#cssmatrix-interface.

Матричные трансформации для хитрецов и ленивых. Меня нельзя назвать математиком даже с самой большой натяжкой, поэтому, столкнувшись с необходимостью создать трансформацию на основе матрицы, я решил схитрить. Если ваши познания в математике тоже не блещут, то я рекомендую вам зайти по адресу http://www.useragentman.com/matrix/ (рисунок 7.10).

Сайт Matrix Construction Set позволяет перетаскивать элементы именно так, как вы желаете, а также предусматривает возможность выполнить старую добрую операцию копирования и вставки кода (включая префиксы поставщиков) для ваших CSS-файлов.

Сайт для задания матричных трансформаций.