Поиск
Подписаться
Разное

Валидный XHTML 1.0 Transitional

Валидный RSS

3D трансформации в CSS Категория: CSS
Название: 3D трансформации в CSS
Дата добавления: 12-05-2012
Раз просмотрено: 616
Комментарии: 1
Рейтинг: * * * * * * * * * * (2 голоса)

3D трансформации в CSS

В 2009 году, команда разработчиков движка WebKit предложила новое расширение в CSS, которое позволит отображать и трансформировать элементы веб-страницы в трех измерениях. Это предложение было названо 3D трансформации, и вскоре оно было реализовано в Safari для Mac и iOS. Примерно через год, поддержка появилась в Chrome и в 2011 в Android. Но вне WebKit ни один из разработчик браузеров не проявил особого энтузиазма по поводу 3D трансформаций в CSS.

Хотя, команды разработчиков Firefox и Internet Explorer решили внедрить 3D трансформации в CSS в предварительные версии своих браузеров. Таким образом, если все пойдет по плану, мы увидим их в Intenet Explorer 10 и в ближайших выпусках Firefox, оба из которых планируются к выпуску в 2012 году. В таком случае, это идеальное время, чтобы опередить события и начать изучать огромные возможности и потенциал дополнительного измерения у веб-страниц. Это статья призвана помочь вам в изучении 3D трансформаций в CSS.

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

Пару слов об осях

В двумерном вебе мы перемещали элементы по вертикали и горизонтали. Каждое из этих направлений называют осью: горизонтальная ось известна как ось X, а вертикальная — как ось Y. Если мы возьмем левую верхнюю точку объекта, как начало отсчета перемещения, движение влево будет отрицательным смещением по оси X, а движение вправо — положительным. То же самое можно сказать о движении по вертикали: перемещение наверх — это положительное смещение по оси Y, а вниз — отрицательное.

Третье измерение известно как ось Z. Движение по ней можно рассматривать как смещение ближе и дальше от вас — положительное по направления к вам, а отрицательное — вдаль от вас.

3 оси — X, Y и Z
3 оси — X, Y и Z

Функции трансформаций

Все различные трансформации применяются единственным CSS свойством transform. Оно же применяется и для 2D CSS трансформаций. К настоящему моменту, это свойство еще считается экспериментальным, поэтому не забывайте использовать браузерные префиксы:

div {
	-moz-transform: …;
	-ms-transform: …;
	-o-transform: …;
	-webkit-transform: …;
}

Обратите внимание, что Opera, в настоящее время, не имеет реализации 3D трансформаций, но в пример они были включены, так как работа над их поддержкой ведется. Для наглядности, я буду использовать свойства без префиксов, но не забывайте включать в ваш код все эти же свойства но с браузерными префиксами.

Свойство transform принимает целый ряд функций, как значения, каждая из которых применяет отдельный тип трансформации. Если вы уже использовали 2D трансформации, то уже знаете многие из этих функций, так как они похожи друг на друга (а в некоторых случаях имеют одинаковое действие). Вот список всех 3D-функций:

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

Вращение

Чтобы понять это, попробуйте проделать маленькое умственное упражнение. Представьте себе висящую игральную карту с ниткой, проходящей через ее центр и удерживающей ей на месте. Удерживая уголки карты пальцами, вы можете перемещать карту вверх и вниз, влево и вправо, вперед и назад, вращая вокруг нитки. Функции rotateX, rotateY и rotateZ принимают как значение градус, на который нужно переместить элемент вокруг исходной точки.

В этом примере мы поворачиваем каждый элемент на 45° вокруг осей в порядке X, Y, Z. Полупрозрачный красный прямоугольник показывает исходное положение элемента (это обозначение будет использоваться и далее).

Каждый элемент вращается на 45° вокруг различных осей (X, Y и Z)
Каждый элемент вращается на 45° вокруг различных осей (X, Y и Z)

Смещение

Функции translateX(), translateY() и translateZ()принимают значение длины, на которую надо сдвинуть жлемент по соответствующей оси. Таким образом translateX(2em)сдвинет элемент на 2 em вправо, а translateZ(-10px)отодвинет элемент на 10 пикселей от смотрящего. Также есть сокращенная функция translate3d(), которая принимает три значения по порядку, по одному для каждой оси: translate3d(x, y, z).

В этом примере мы сместили каждый элемент на -20 пикселей по всем осям:

Каждый элемент смещен на -20 пикселей по осям X, Y и Z
Каждый элемент смещен на -20 пикселей по осям X, Y и Z

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

Масштабирование

Это означает просто увеличение или уменьшение. Три функции — scaleX(), scaleY() и scaleZ()принимают безразмерную величину как значение, которое используется как множитель. Для scaleX() и scaleY()он применяется непосредственно к ширине и высоте. Например, применяя scaleX(1.5) к объекту в 100 пикселей шириной, мы получим объект в 150 пикселей.

Функция scaleZ()работает несколько иначе. У трансформируемых элементов нет глубины чтобы увеличивать или уменьшать, это больше похоже на перемещение двумерного объекта в пространстве. Функция scaleZ() действует как множитель для функции translateZ(). Таким образом, приминив к объекту translateZ(10px) и scaleZ(2), мы сдвинем его на 20 пикселей по оси Z. Также существует сокращенная функция scale3d(x, y, z), которая принимает три параметра, как и translate3d().

Перспектива

Функция perspective()довольно проста, но проявление ее сложно. Эта функция принимает единственное значение, которое является единицей длины больше чем ноль. Для наших целей, достаточно знать, что чем меньше число, тем более сильный 3D эффект мы получим. Любое значение меньше 200 пикселей сделает трансформацию чрезмерно сильной, а больше 1000 пикселей едва будет заметна.

В третьем примере к объектам была применена функция perspective() с параметрами 25, 50 и 200 пикселей. Параметры увеличиваются слева направо:

У элементов значение функции перспективы равно 25, 50 и 200 пикселей
У элементов значение функции перспективы равно 25, 50 и 200 пикселей

Заключение

Вот и все, надеюсь вы получили полезные сведения из этой статьи по 3D трансформациям в CSS, которую я старался написать понятным языком. Главное не забывайте о том, что эта особенность очень новая и многие браузеры ее еще не поддерживают, а также не стоит все на странице подвергать 3D трансформациям.

Это интересно: «Красивая всплывающая подсказка».

Понравился материал? Расскажи о нем всем:
Оцените эту статью:
Прокомментируйте:
Ваше имя:
Гость  •  2012-05-13 20:39:24
со временем стандарт меняется и браузерам приходится подстраиваться к нему, что может привести к ошибкам в уже написанном (старом) коде. Поэтому следует дважды подумать перед тем, как применять на практике такие «супер-новые» решения.