—»     —»   CSS3 Transforms: 2D и 3D-эффекты в веб-страницах
  Раздел: CSS/Style Sheets   Комментариев: 3  

CSS3 Transforms: 2D и 3D-эффекты в веб-страницах

Переходы позволяют вам смягчить изменения, вносимые в CSS-код, тем самым создавая ощущение естественности. Тем не менее, сами собой они не определяют изменения. Сегодня мы хотим рассказать вам о нескольких динамических изменениях, которые называются трансформации (Transforms).

CSS трансформации делят на 2 типа:

* 2D (двумерные) трансформации позволяют элементам, сгенерированным посредством CSS, трансформироваться в двумерном пространстве.
* 3D (трехмерные) расширяют само понятие трансформации, и позволяют элементам, сгенерированным посредством CSS, трансформироваться в трехмерном пространстве.

2D-трансформации хорошо поддерживаются браузерами (проще говоря, они работают почти во всех современных браузерах).

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

Мы подготовили демо, в котором отображены двумерные трансформации.

Ситуация с трехмерными эффектами немного иная. Эти трансформации будут работать в Safari и Chrome (а также в мобильной версии Safari и в системе Android), но вряд ли в остальных браузерах. Их поддерживает IE10, чего нельзя сказать про Firefox и Opera.

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

CSS3 Transforms: 2D и 3D-эффекты в веб-страницах

2D-трансформации на CSS

Если подумать о том, что монитор вашего компьютера плоский, то это 2D transforms в CSS3 – это то, с помощью чего, можно проводить различные манипуляции на этой двумерной плоскости.

Здесь у нас есть только 2 параметра, а настоящая магия происходит только при изменении первого параметра.

* параметр transform
* параметр transform-origin
* функции трансформации (значения параметра transform)

Вскоре мы увидим, что именно в последнем пункте начинается веселье.

transform

Вы можете не задавать значение параметру transform, либо задать одно, либо несколько. Идея заключается в установке нужной вам трансформации.

div {
transform: scale(1.5);
}

Вышеприведенный код увеличит div’ы в 1.5 раза.

Трансформации применяются как к блочным, так и к строчным элементам. Когда мы используем относительные величины (типа %), они будут вычисляться за счет блока элемента, а не его контейнера.

transform-origin

Данный параметр позволяет вам обозначить стартовую точку трансформации. Теперь мы можем определить исходное положение, у которого будут положения «до» и «после» трансформации.

div {
transform-origin: 0, 0;
}

Вышеприведенный код устанавливает исходную точку на 0,0. Эта точка будет фиксирована на протяжении всего процесса трансформации.

Возможные параметры: [percentage | length | left | center | right] [percentage | length | top | center | bottom]

Первое значение отвечает за горизонтальную ось, второе – за вертикальную до тех пор, пока не будет использовано хотя бы одно ключевое слово. Если не указано ни горизонтальное, ни вертикальное значение, то выставляется стандартное значение по центру.

CSS3 Transforms: 2D и 3D-эффекты в веб-страницах

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

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

Matrix (матрица)

Давайте начнем с этого самого исключения, так как оно очень важно для работы со всем остальным.

Здесь идея заключается в том, что все трансформации могут быть представлены на матрице 3х3. В двумерных трансформациях мы используем лишь 2 оси на матрице с 6 значениями.

Исходная система координат (перед трансформацией) = данной матрице и в некоторых случаях новой системе координат (после трансформации).

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

div {
matrix(<number>, <number>, <number>, <number>, <number>, <number>);
}

Вы, вероятно, захотите применить данные функции на практике, но важно помнить об указании всех 6 значений.

CSS3 Transforms: 2D и 3D-эффекты в веб-страницах

Translation (перемещение)

Существует 3 типа трансформации Translation, которые позволяют вам передвигать элемент из одного места в другое.

* translate(<translation-value>[, <translation-value>])
* translateX(<translation-value>)
* translateY(<translation-value>)

div {
transform: translate(10px, 30%);
}

translation-value (значения переходов) могут быть представлены в виде длины, либо в процентном выражении, и каждая из 3 функций, представленных выше, производит именно то, что вы от нее ожидаете.

Все 3 перемещают элемент из одной локации в другую ровно настолько, насколько высокое значение задано в функции. Первое значение как в x, так и в y задает координаты, а последние 2 указывают направление.

Когда применяется трансформация translate, первое значение отвечает за перемещение по оси Х, а второе по оси Y.

Scale (масштабирование)

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

* scale(<number>[, <number>])
* scaleX(<number>)
* scaleY(<number>)

div {
transform: scale(2.0);
}

Здесь, для того чтобы уменьшить или увеличить элемент, используются значения меньше, чем 1.0, либо больше, чем 1.0. Здесь вы также можете уменьшать или увеличивать элемент как по оси Х, так и по оси Y.

Как и в случае с translate, сначала идет значение по оси Х, а за ним – значение по оси Y.

Rotate (вращение)

У rotate есть лишь одна функция, так как определение вращения задается вокруг фиксированной точки (transform-origin), а не по осям х-у.

* rotate(<angle>)

div {
transform: rotate(45deg);
}

Положительные углы вращают элемент по часовой стрелке, а отрицательные – против.

Skew (наклон)

Нам кажется, вы догадались, что должно наклоняться. Здесь все работает по тому же принципу, что и в эффектах, приведенных выше, и здесь также используются оси х-у.

* skew(<angle> [, <angle>])
* skewX(<angle>)
* skewY(<angle>)

С помощью skew вы можете определить наклон в обоих направлениях.

div {
transform: skew(5deg, 20deg);
}

Множественные трансформации

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

div {
transform: translate(10px 30%) scale(2.0) rotate(45deg) skew(5deg, 20deg);
}

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

Трехмерные CSS-трансформации

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

Здесь параметры трансформации также указываются с помощью функции трансформации. Здесь также нужно выставлять значение transform-origin, за исключением лишь того, что здесь также имеется координата Z.

div {
transform-origin: 0, 0, 0;
}

Также следует отметить наличие нескольких дополнительных параметров, о которых мы вкратце вам расскажем.

* transform-style — определяет способ отображения соединенных элементов в трехмерном пространстве. Здесь есть 2 значения: flat и preserve-3d. Flat означает то, что дочерние элементы генерируются плоскими на двумерной плоскости, а preserve-3d предотвращает использование плоских элементов.

* perspective — задает ту же трансформацию, что и функция perspective transform, за исключением того, что она применяется к дочерним элементам. Значение выставляется на none, либо указываются цифры.

* perspective-origin — определяет исходное положение трансформации, приведенной выше. Существуют значения [percentage | length | left | center | right] [percentage | length | top | center | bottom].

* backface-visibility — определяет, будет ли видна задняя часть трансформируемого элемента. Можно выставить значения visible или hidden.

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

Функции трехмерных трансформаций основаны на функциях двумерных, разве что где-то добавлено 1-2 новых функций, которые даже не нужно объяснять.

К матрице, например, была добавлена функция matrix3d, которая позволяет определять еще и третью сторону матрицы.

matrix3d(<number>, <number>, <number>, <number>, <number>, <number>, <number>, <number>, <number>;)

Опять же, требуемые функции, являются определенные значениями matrix или matrix3d

Дополнения функции translate:

* translate3d(<translation-value>, <translation-value>, <translation-value>)
* translateZ(<translation-value>)

Дополнения scale:

* scale3d(<number>, <number>, <number>)
* scaleZ(<number>)

Дополнения rotate:

* rotate3d(<number>, <number>, <number>, <angle>)
* rotateX(<angle>)
* rotateY(<angle>)
* rotateZ(<angle>)

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

В функции Skew не было добавлено ничего нового, но теперь у нас есть еще одна новая функция – perspective.

* perspective(<number>)

Perspective задает перспективную матрицы проекции, которая являет собой нечто вроде куба, в котором элемент отображается посетителю.

Число, указанное в функции, определяет глубину и дистанцию плоскости z=0.

Чем ниже значение, тем ниже пирамида, если такое объяснение будет более понятным.

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

Заключение

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

Достаточно использовать трансформации редко, но метко. Это поможет вам привлечь внимание посетителей, но будьте осторожны с использованием.

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

Так как трансформации еще не поддерживаются браузерами на 100%, старайтесь применять их лишь на тех элементах, которые не несут критически важной информации, которая может пройти мимо пользователей, чьи браузеры не смогут сгенерировать эти элементы.
Обнаружили ошибку или мёртвую ссылку?
Выделите проблемный фрагмент мышкой и нажмите CTRL+ENTER.
В появившемся окне опишите проблему и отправьте уведомление Администрации ресурса.
Нужна органическая вечная ссылка из данной статьи? Постовой?
Подробности здесь
Вам понравился материал? Поблагодарить легко!
Будем весьма признательны, если поделитесь этой статьей в социальных сетях:

Ключевые тэги: CSS, 3D
Опубликовал Design FactoRy   Прочитано (раз): 12500   |   Оставлено комментариев: 3
Источник материала / оригинал статьи   Распечатать
Другие статьи и новости по теме:
Комментарий #1: 2 февраля 2012 @ 08:30
Написал: Ira — группа: Гости  
На сайте с: --   |   Публикаций: 0   |   Комментариев: 0
ICQ: --- не указано ---
Сначала смотришь на статью и как-то страшно. Но если читать и делать все по-порядку, то вполне доступно все, а главное получается. Расширяю свою базу знаний, благодаря вам.
Комментарий #2: 14 сентября 2012 @ 21:38
Написал: WeezyF — группа: Гости  
На сайте с: --   |   Публикаций: 0   |   Комментариев: 0
ICQ: --- не указано ---
Интересный эффект с применением CSS transform - http://lecaw.ru/index.php/css/item/294-effekt-vrasheniya-kuba
Комментарий #3: 18 мая 2013 @ 19:37
Написал: mrnobody — группа: Гости  
На сайте с: --   |   Публикаций: 0   |   Комментариев: 0
ICQ: --- не указано ---
В transform-origin значения должный разделяться пробелом, а не запятой.
transform-origin: 5px 26px;

http://dev.w3.org/csswg/css-transforms/#transform-origin

https://developer.mozilla.org/en-US/docs/Web/CSS/transform-origin?redirectlocale
=en-US&redirectslug=CSS%2Ftransform-origin
Добавление комментария
Уважаемые пользователи!
При добавлении комментариев на сайт Вам следует учитывать следующее - все комментарии проверяются Администрацией на предмет отсутствия спама. При обнаружении признаков спама, в оставленном Вами комментарии, сам комментарий будет незамедлительно удалён, а Ваш IP-адрес будет забанен без предупреждения! Учётные записи пользователей, рассылающих спам, блокируются/удаляются без права последующего восстановления.

С уважением, Администрация сайта.
* = поля обязательны к заполнению
Полужирный Наклонный текст Подчеркнутый текст Зачеркнутый текст | Выравнивание по левому краю По центру Выравнивание по правому краю | Вставка смайликов Выбор цвета | Скрытый текст Вставка цитаты Преобразовать выбранный текст из транслитерации в кириллицу Вставка спойлера
Вопрос : Назовите месяц November по-русски
Подтверждение кода безопасности :

Включите эту картинку для отображения кода безопасности
обновить, если не виден код


Спонсоры проекта
Баннер в сайдбаре 1 (сквозной)
Баннер в сайдбаре 2 (сквозной)
Спонсоры проекта
Баннер в сайдбаре 3 (сквозной)
Баннер в сайдбаре 4 (сквозной)
Популярные публикации







Свежие шаблоны сайтов каждый день
С миру по нитке
«    Октябрь 2020    »
ПнВтСрЧтПтСбВс
 1234
567891011
12131415161718
19202122232425
262728293031