CSS-трансформации. Сдвиг


Содержание

Трансформация

На этой странице

CSS-свойство transform позволяет вам поворачивать, маштабировать, наклонять или сдвигать элемент. Оно модифицирует координатное пространство для CSS визуальной форматируемой модели.

The source for this interactive example is stored in a GitHub repository. If you’d like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.

Если свойство имеет значение, отличное от none , будет создан контекст наложения. В этом случае, элемент будет действовать как содержащий блок для любых элементов position: fixed; или position: absolute; которые он содержит.

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

Синтаксис

Свойство transform может быть указано как значение ключевого слова none или как одно или более значений «> .

CSS трансформация

Свойство transform осуществляет CSS трансформацию элемента. Оно имеет много значений, и каждое значение производит свой вид трансформации.

Вращение

Один из видов трансформации — вращение элемента. Значение свойства:

Вращение происходит по часовой стрелке. Угол указывается в градусах. После числа без пробела нужно написать ключевое слово deg . Создадим блок, к которому далее применим вращение:

ВАЖНО: При трансформации элемент не освобождает пространство для нового положения, а перекрывает другие элементы, как при позиционировании.

Осью вращения является центр элемента. Свойство transform-origin позволяет указать другое положение.

Это свойство устанавливает точку, относительно которой происходит трансформация. Для вращения — это ось вращения. В значении свойства указывается положение точки по оси X, потом через пробел положение точки по оси Y.

По оси X бывают такие значения: left , center , right .

По оси Y бывают такие значения: top , center , bottom .

Также смещение точки можно указать в единицах изменения CSS и в процентах. Расстояние отсчитывается от левого верхнего угла элемента.

Укажем это свойство блоку:

Перемещение

CSS трансформация даёт возможность переместить элемент относительно его положения в потоке. Значение свойства

transform: translate(горизонтальное смещение, вертикальное смещение)

Смещение указывается в единицах измерения CSS. При положительных значениях перемещение происходит вправо и вниз, а при отрицательных влево и вверх.

Добавим ещё один блок и применим к нему перемещение:

Существуют значения свойства transform , которые по отдельности устанавливают горизонтальное и вертикальное перемещение.

Смещение указывается точно также.

Изменение размеров

CSS трансформация позволяет менять размеры элемента. Значение свойства:

transform: scale(X, Y)

X — число, на которое умножается ширина элемента.

Y — число, на которое умножается высота элемента.

Добавим на страницу блок и изменим его размеры:

Если указать отрицательное число, то получится зеркальное отображение элемента.

Transform CSS: теория и примеры трансформации объектов

Третья версия каскадных таблиц стилей привнесла новые свойства для объектов веб-страниц. Это возможность создавать блоки со сглаженными углами, настраивать тени, добавлять прозрачность и градиент, задавать анимацию. О последнем стоит упомянуть подробнее. Если ранее для создания иллюзии движения на страницы добавляли gif-файлы, которые нужно было специально отрисовывать, то сейчас атрибут transform CSS выполняет все действия по анимации объектов автоматически. Осталось научиться его использовать.

Особенности применения свойства

Обычно к трансформация объектов прибегают при наведении на них мышки. Она задаётся для псевдокласса с именем :hover. Изменения затрагивают только один элемент веб-страницы, не влияя на остальные.

Рассматриваемый параметр стилей часто путают с другим – text-transform. CSS чётко разграничивает эти атрибуты. Последний определяет стиль написания текста и применяется только к абзацам веб-страницы, тогда как трансформация в чистом виде используется для всех элементов.

К любому объекту можно добавить:

  • перемещение вдоль прямой (горизонталь, вертикаль, диагональ);
  • поворот (частный случай – наклон);
  • масштабирование;
  • комбинацию перечисленных эффектов.

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

Трансформация выполняется относительно центра элемента. При необходимости точка отсчёта смещается. Параметр transform-origin: a b c смещает центр объекта относительно трёхмерной системы координат xyz.

Движение по горизонтали

Простейший вид перемещения – по горизонтали, то есть влево-вправо или вдоль оси x. Для его задания применяют значение свойства translate(x,y).

Поскольку элемент должен перемещаться только в одном направлении, координата y устанавливается y=0. А вот x-координате нужно назначить конкретную величину в пикселях, на которую объект должен быть сдвинут. Отрицательное значение – движение влево, положительное – вправо.

Но простое указание transform CSS не создаст иллюзию движения. Решение – добавить к описанию объекта атрибут transition. Рабочий пример для смещения элемента вправо на 125 пикселей показан ниже.

  • all – установленное значение применяется ко всем параметрам объекта;
  • 2s – длительность эффекта 2 секунды;
  • ease-in-out – медленное движение в начале и в конце.

Перемещение вниз-вверх

Значение translate(x,y) используется, чтобы задать анимацию по вертикали. При этом координата x приравнивается к нулю, а y назначается величиной сдвига. Перемещение вверх – отрицательное значение, вниз – положительное.

Свойство transform CSS для класса up в примере ниже демонстрирует плавное перемещение объекта из точки с координатами (0; 0) на 80 пикселей вверх. Класс down задаёт противоположное направление движения – на 80 пикселей вниз.

Анимация в примере осуществляется с постоянной скоростью, на что указывает значение linear.

Диагональный ход

Если объединить рассмотренные перемещения, задаваемые transform, CSS-примеры для диагонального движения получаются просто.

В атрибуте устанавливаются значения для обеих координат. Расстояние смещения задаются пикселями. Куда будет двигаться объект – зависит от знаков. Возможны четыре варианта:

  • x, y положительные – движение вправо вниз;
  • x, y отрицательные – движение влево вверх;
  • x – положительное, y – отрицательное – движение вправо вверх;
  • x – отрицательное, y – положительное – движение влево вниз.

Разобраться с особенностями transform CSS поможет пример.

Если сдвиг по обеим осям выполняется на одинаковое количество пикселей (например, 32), достаточно указать одно число. То есть запись translate(32) соответствует translate(32, 32).

Вращение

После того как возможные способы перемещений рассмотрены, переходим к следующему виду трансформации – вращению. Поворот задаёт значение rotate(Xdeg), где X – градусы (от 0 до 360), на которые объект отклоняется от первоначального положения.

Осталось разобраться с направлением вращения. Вид поворота определяют знаки: плюс – по часовой стрелке, минус – против. При желании можно совместить оба вида поворота – смотрите пример ниже.

Изменение размера

Следующее значение добавляет масштабирование элемента: scale(a,b). Буквы в скобках – это ширина и высота объекта. Если требуется увеличить размер пропорционально в три раза, достаточно записать scale(3). Уменьшают габариты числа меньше единицы.

Запись атрибута transform CSS можно применить только к горизонтали – scaleX, или только к вертикали – scaleY. Интересные эффекты отражения и тени получатся в том случае, если будут заданы отрицательные значения для scaleY.

Трансформация текста

Новички путают рассмотренное свойство трансформации с атрибутом text-transform CSS. Напоминаем, данный параметр применяется только к тексту. С его помощью управляют регистром написания абзаца символов. Например, после установки lowercase текст преобразуется в строчные буквы, uppercase – в прописные (аналогично нажатой клавише CapsLock на клавиатуре). Чтобы слова начинались с большой буквы, свойству назначают capitalize.

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

CSS трансформации и анимация

Результат данного урока работает в браузерах Safari, Chrome, Opera, Firefox, начиная с версии 4 (где увидите трансформации, но без анимации). Также, с помощью браузерного префикса -ms-, вы сможете увидеть положительные результат в IE, начиная с 9ой версии.

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

Для работы трансформаций в Firefox и Opera просто замените префикс -webkit на -moz и -o. Для IE — на -ms.

1. Введение в CSS трансформации

CSS трансформации используют для изменения вида, поворота и других преобразований элемента. Все эти настройки выставляются в обычных таблицах стилей, и когда вы открываете страницу, то уже видите готовый результат трансформации. Для того чтобы увидеть само преобразование из одного вида в другой (анимацию трансформации), к элементу можно прикрутить какое-то событие (например, событие mouseover);

В примере, указанном ниже, мы расположили 4 абсолютно одинаковых div-а с рамкой в 2px. Для трансформации данных элементов в браузерах, работающих на webkit, добавляем префикс -webkit-transform:

div 1 Перемещён вправо -webkit-transform: translate(3em,0);
div 2 Повёрнут на 30 градусов по часовой стрелке -webkit-transform: rotate(30deg);
div 3 Смещён влево и вниз -webkit-transform: translate(-3em,1em);
div 4 Увеличен вдвое -webkit-transform: scale(2);

Без данных трансформаций div-ы будут выглядеть абсолютно одинаково.

2. Анимация

Для анимации трансформаций в Webkit браузерах можно воспользоваться префиксом -webkit-transition. Демонстрация представлена ниже:

Перед вами 4 одинаковых div-а. Для запуска анимации необходимо подвести/отвести мышь. При всём при этом, никакого JavaScript. Только HTML и CSS.

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

Опять же, мы используем только HTML и CSS. В данном случае, изменяем настройки border-color, border-radius.

4. Множественные трансформации на одном элементе

Для применения множественных трансформаций к одному и тому же элементу просто перечислите настройки через пробел. К примеру:

Данные настройки при наводке мыши за 1 секунду изменят цвет под-меню, повернут его, увеличат в размере.

4. Анимация в действии

Вот ещё один интересный пример комбинирования различного рода трансформаций в одной анимации:

Данный пример может работать не очень хорошо в Safari 3 и в ранних версиях Opera.

Блок, окружённый точечной рамкой, который появляется во время проигрывания анимации, отображает позицию элемента div. Его мы просто смещаем, а его содержание поворачиваем. Всё просто!

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

5. Использование различных видов анимации

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

При событии :hover, синий квадрат, повернётся, поменяет цвет на красный, и передвинется из верхнего левого угла в правый нижний.

Первое, что вы наверное должны были заметить, так это особенность передвижения квадрата. Теперь оно не резкое, а более “изогнутое”. Всё благодаря функциям ease-out и ease-in.

Также обратите внимание, что изменение цвета происходит до поворота.

Фишка в том, что вы можете разбить -webkit-transition на несколько записей:

6. Событие одного элемента преобразует другой

Многих наверное заинтересует подобный функционал: клик на один элемент вызывает преобразование другого. В CSS этого можно достичь, воспользовавшись селекторами >, + и

Вот и соответствующий пример:

В этом примере мы воспользовались знаком +, чтобы взаимодействовать с #box1 и #box2.

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

В то же время, мы можем анимировать и первый блок:

Недостаток данных примеров только в том, что они не работают (или работают криво) в более ранних версиях браузеров.

Спасибо Niall за предложенный урок!

Данный урок подготовлен для вас командой сайта ruseller.com
Источник урока: http://www.the-art-of-web.com/css/css-animation/#.UWUdVJMvmSr
Перевел: Станислав Протасевич
Урок создан: 10 Апреля 2013
Просмотров: 125056
Правила перепечатки

5 последних уроков рубрики «CSS»

Забавные эффекты для букв

Небольшой эффект с интерактивной анимацией букв.

Реализация забавных подсказок

Небольшой концепт забавных подсказок, которые реализованы на SVG и anime.js. Помимо особого стиля в примере реализована анимация и трансформация графических объектов.

Анимированные буквы

Эксперимент: анимированные SVG буквы на базе библиотеки anime.js.

Солнцезащитные очки от первого лица

Прикольный эксперимент веб страницы отображение которой осуществляется “от первого лица” через солнцезащитные очки.

Раскрывающаяся навигация

Экспериментальный скрипт раскрывающейся навигации.

Трансформация элементов

Трансформация объектов доступна в таких дизайнерских программах, как Adobe Photoshop или Adobe Illustrator, причем существует в них в незапамятных времен. Как css-свойство transform появилось только в версии CSS3, и сразу же пришлось многим верстальщикам «по сердцу», особенно в паре со свойством transition, позволяющим назначать анимацию средствами css.

Свойство transform

CSS-свойство transform подразумевает использование одной или нескольких функций:

Масштабирование элемента — функция scale()

По умолчанию функция scale() имеет значение 1, т.е. transform: scale(1) — это нормальное состояние любого элемента. Поэтому при масштабировании объект обычно либо увеличивают scale(1.5) , либо уменьшают scale(.5) . Со значением -1 вы получите зеркальное отражение, причем по обеим осям.

Если масштабирование необходимо выполнить по одной из осей, можно использовать функцию scaleX(значение) или scaleY(значение):

Можно масштабировать элемент с разными пропорциями по оси X и Y сразу, указывая 2 значения через запятую в скобках:

Также часто применяют масштабирование элементов вместе с анимацией (так называемые hover-эффекты, или эффекты при наведении):

Как это выглядит на практике можно посмотреть в примере ниже:

Поворот rotate()

Для того чтобы повернуть элемент, необходимо использовать функцию rotate(угол). Угол можно указывать в нескольких единицах:

  • В градусах ( deg) . Наиболее часто используемая единица измерения. Полный круг равен 360deg.
  • В градах ( grad) . Полный круг равен 400grad,
  • В радианах ( rad) . Полный круг равен 2π или примерно 6.2832rad.
  • В поворотах ( turn) . Один круг равен одному повороту и пишется как 1turn. Отлично используется для анимации.

В коде использование этой функции будет выглядеть так:

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

Скос элемента — функция skew()

В градусах (deg), градах (grad) или радианах (rad) также измеряется и скос, или искажение сторон, элемента. За это преобразование отвечает функция skew():

Как видно из кода, вы можете задать скос (или наклон) элемента либо одной цифрой (он будет выполнен по по оси X), либо двумя (первая — по оси X, вторая — по оси Y), или задать явно, по какой оси нужен скос, используя функции skewX или skewY.

Наглядная демонстрация использования трансформации скоса (наклона) в примере:

Смещение translate()

Очень удобное свойство, которое позволяет смещать элементы, которые не позиционированы абсолютно или относительно. В качестве аргументов можно указывать число в %, px, em, rem и т.п., причем как положительные, так и отрицательные. В случае использования % величина смещения берется от ширины или высоты элемента.

При использовании функции translate() с одним параметром смещение будет происходить по горизонтали (вправо — при положительных значениях, влево — при отрицательных значениях). Можно указать 2 параметра — тогда смещение будет и по горизонтали, и по вертикали одновременно. Для того чтобы сместить элемент по одной из осей, можно использовать функции translateX() или translateY() для горизонтального и вертикального смещения:

Трансформации

Стажировка HTML5

Дмитрий Мещеряков

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

Свойство transform

CSS3 трансформации изменяют размер, форму и положение элемента на странице с помощью свойства transform. Трансформации преобразовывают элемент, не затрагивая остальные элементы страницы, т.е. другие элементы не сдвигаются относительно него. По умолчанию трансформация происходит относительно центра элемента.

  • поддержка трансформаций: IE9+;
  • нужны вендорные префиксы для IE9, Safari 8-, Android;
  • значение по умолчанию: transform: none;

Допустимые функции трансформации:

  • перемещение элемента: translate(), translateX(), translateY() — единицы длины (положительные и отрицательные), %;
  • масштабирование элемента: scale(), scaleX(), scaleY() — любое число;
  • вращение элемента: rotate() — угол (deg, grad, rad или turn);
  • искажение элемента: skew(), skewX(), skewY() — угол (deg, grad, rad).

Перемещение элемента

Свойство transform: translate();

Перемещает элемент относительно его текущего местоположения.

Примеры

Перемещение элемента

Центрирование при помощи transform: translate()

При помощи свойства transform: translate(); можно отцентрировать элемент по горизонтали, по вертикали или одновременно по горизонтали и по вертикали.

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

Свойство transform: scale();

Масштабирует элемент по ширине, делая его шире или уже. Если указано отрицательное значение, то элемент отображается зеркально.

Примеры

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

Вращение элемента

Свойство transform: rotate();

Поворачивает элемент на указанное количество градусов; положительные значения поворачивают элемент по часовой стрелке, отрицательные — против часовой стрелки.

Примеры

Вращение элемента

Поворот на 360 градусов

Поворот на 720 градусов

Искажение элемента

Свойство transform: skew();

Используется для искажения сторон элемента относительно координатных осей.

Илон Маск рекомендует:  Что такое код xmlrpc_decode_request

Примеры

Искажение элемента

Точка трансформации

Свойство transform-origin;

Позволяет сместить центр трансформации, относительно которого происходит изменение положения/размера/формы элемента. Значение по умолчанию — center, или 50% 50%.

В качестве значений могут использоваться любые единицы измерения длины (px, em, rem, %, ключевые слова top, bottom, left, right).

Примеры

Точка трансформации

Искажение элемента без искажения текста

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

See the Pen [transformations] — text without skew by HTML Five Noveo Software University (@HTML5-Noveo-SU) on CodePen.

See the Pen [transformations] — text without skew by HTML Five Noveo Software University (@HTML5-Noveo-SU) on CodePen.

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

Способ 1. Значения через пробел

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

Способ 2. Значения через функцию matrix()

Матрица преобразований предназначена для вычисления новых координат элемента с целью его трансформации.

Матрица преобразований имеет размер 3х3 и в общем виде записывается так:

Мы можем записать это при помощи ключевого слова matrix в свойстве transform:

Буквы от a до f — числа, определяемые типом трансформации. Матрицы — это рецепты тех видов трансформации, которые мы хотим применить.

Когда мы применяем двумерную трансформацию, браузер умножает матрицу на вектор [x, y, 1]. Значения X и Y — координаты конкретной точки блока, к которому применяется трансформация.

Функция matrix()

Чтобы найти координаты после трансформации, мы умножаем каждый элемент каждой строки матрицы на соответствующую ему строку вектора. Затем складываем произведения:

Функция matrix()

У каждого типа трансформаций — своя собственная матрица. Например, так выглядит матрица для трансформации сдвига:

Значения tx и ty — значения, на которые должно быть сдвинуто начало координат. Мы также можем представить это с помощью вектора [1 0 0 1 tx ty]. Этот вектор служит аргументом для функции matrix():

Функция matrix()

Так выглядят матрицы преобразований для разных видов трансформации:

Функция matrix()

Для вычисления составных трансформаций используется перемножение соответствующих матриц преобразований. Например, если нужно повернуть элемент на 45 градусов и увеличить его в 1.5 раза, то нужно умножить две матрицы:

Пример составной трансформации при помощи функции matrix()

Пример составной трансформации при помощи функции matrix()

See the Pen [transformations] — matrix() by HTML Five Noveo Software University (@HTML5-Noveo-SU) on CodePen.

See the Pen [transformations] — matrix() by HTML Five Noveo Software University (@HTML5-Noveo-SU) on CodePen.

Новый контекст наложения

Блок, к которому применяется transform , создает новый контекст наложения, ведет себя так, как если к нему применить position: relative . Поэтому дочерние элементы с position: absolute будут позиционироваться относительно этого родительского элемента с трансформацией.

Фиксированные ( position: fixed ) элементы внутри блока, к которому применяется transform, будут вести себя как элементы с position: absolute. Т.е. они будут позиционироваться относительно родитеского элемента с трансформацией, их можно «проскроллить», будто они не фиксированные.

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

3D трансформации создают объемные реалистичные эффекты на веб-страницах.

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

  • поддержка 3D трансформаций: IE10+;
  • для активации 3D пространства нужно установить свойство perspective для родительского контейнера;
  • допустимые 3D трансформации: translate(), scale(), rotate(), matrix().

Установка 3D-перспективы

Свойство perspective (задает глубину просмотра, т.е. расстояние по оси Z между z=0 и пользователем)

Чем меньше значение, тем ближе Z-пространство к зрителю и тем больше эффект, заданный с помощью свойства transform. 0 (как и none) означает отсутствие перспективы.

Задание точки трансформации

Свойство perspective-origin (аналогично transform-origin)

Стиль 3D-преобразований

Свойство transform-style (не поддерживается во всех IE)

Определяет, как вложенные элементы отрисовываются в трехмерном пространстве:

  • flat — значение по умолчанию. Все дочерние элементы отображаются плоскими в двухмерной плоскости блока-контейнера;
  • preserve-3d — располагает элементы в трехмерном пространстве.

Стиль 3D-преобразований

See the Pen [transformations] — transform-style by HTML Five Noveo Software University (@HTML5-Noveo-SU) on CodePen.

See the Pen [transformations] — transform-style by HTML Five Noveo Software University (@HTML5-Noveo-SU) on CodePen.

CSS-трансформации. Сдвиг

Перед вами гостевой пост Аны Тудор. Ана всегда проделывает грандиозную работу, погружаясь в математику, стоящуя за тем, что мы можем делать графически в вебе. В данном случае, это очень кстати, поскольку есть несколько способов работы с SVG-трансформациями и они требуют немного математического мышления, особенно для преобразования одного типа в другой для наилучшей кроссбраузерной поддержки. Давай, Ана.

Как и HTML-элементами, SVG-элементами можно управлять при помощи функций для трансформации. Однако, далеко не всё работает с SVG-элементами так, как с HTML-элементами

Для начала, CSS-трансформации для SVG-элементов не работают в IE. Конечно, есть вариант с использованием SVG-атрибутов трансформации для IE, в случае, если нам нужно применять для наших элементов только 2D-трансформации.

Однако, в этом случае, все параметры для функций трансформаций представлены в виде чисел, что означает, что мы не можем управлять единицами измерения и комбинировать их. Например, мы не можем использовать значения в % для функций сдвига (хотя значения % всё равно бы не стали работать для CSS-трансформаций в Firefox, и не важно, говорим ли мы о значениях transform-origin или параметрах translate()), и все значения для поворота или угла наклона высчитываются в градусах, поэтому мы не можем применять другие единицы измерения, которые доступны в CSS.

Еще одна проблема — тот факт, что определение возможностей скриптом не справляется (чтение значения CSS-трансформации при помощи JS вернёт матрицу, эквивалентную трансформации, которую мы установили в нашей таблице стилей), поэтому нам нужен либо другой способ проверки для IE, либо нам надо повсеместно использовать атрибуты трансформации (что в каком-то смысле кажется более легким путем вообще)

Главная разница в работе между HTML- и SVG-элементами — локальная система координат элемента. У каждого элемента, будь то HTML- или SVG-элемент, есть такая система. Для HTML-элементов эта система координат начинается в точке 50% 50% элемента. Для SVG-элементов (если мы не применяли трансформации к элементу или его предкам в пределах элемента ) исходная точка находится в 0 0 SVG-холста. Это приведёт к разным результатам с трансформациями rotate , scale или skew , если точка 50% 50% SVG-элемента не совпадает с точкой 0 0 SVG-холста.

Чтобы лучше это понимать, давайте посмотрим, как работают функции трансформации.

Как работают функции трансформации

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

Сдвиг

Сдвиг перемещает все точки элемента в том же направлении и на ту же величину. Сдвиг сохраняет параллельность, углы и расстояния. Это можно интерпретировать, как сдвиг начальной точки системы координат элемента — когда это происходит, любой элемент, положение которого описывается относительно этой начальной точки (сам элемент и любые его потомки), тоже сдвигается. Его результат не зависит от положения системы координат.

Рисунок 1: трансформация сдвига: HTML-элементы (слева) напротив SVG-элементов (справа)

На рисунке выше представлено сравнение примеров с HTML (слева) и SVG (справа). Полупрозрачные рисунки элементов — это их исходное положение (до применения сдвига). Трансформация сдвига перемещает элементы вместе с их системами координат, и это же произойдет с любыми потомками наших элементов, если таковые будут.

Как вы уже знаете, различие между двумя случаями — положение системы координат. В случае с HTML, начало координат находится в точке 50% 50% элемента. В случае с SVG начало координат располагается в точке 0 0 холста (если мы не применяли трансформации ни к каким возможным предкам элемента в пределах элемента ). Тем не менее, при сдвиге положение системы координат относительно элемента не влияет на конечное положение элемента.

Как для HTML-, так и для SVG-элементов, при использовании CSS-трансформации у нас есть три функции для сдвига, доступные для 2D: translateX(tx) , translateY(ty) и translate(tx[, ty]) . Первые две влияют только на направления x и y (как указано системой координат элемента), соответственно. Заметьте, что если другая трансформация применена до сдвига, то направления x и y , возможно, больше не будут горизонтальным и вертикальным, соответственно. Третья функция сдвига перемещает элемент на tx вдоль оси x и на ty вдоль оси y . Параметр ty необязательный, и если он не указан, по умолчанию он равен нулю.

SVG-элементы могут также перемещаться при помощи атрибутов для трансформации. В этом случае, у нас есть только функция translate(tx[ ty]) . Здесь значения могут разделяться пробелами, а не только запятыми, как в аналогичной функции CSS-трансформации. Поэтому в очень простом случае, когда 1 в пользовательской системе координат SVG равно 1px , это равнозначно 1px , следующие два способа сдвига SVG-элемента равнозначны:

• применение атрибутов для SVG-атрибута для трансформации:

Заметьте: SVG-атрибут для трансформации и CSS-свойство для трансформации будут объединены.

Последовательные трансформации translate() можно складывать, это значит, что цепочки вида translate(tx1, ty1) translate(tx2, ty2) можно записывать как translate(tx1 + tx2, ty1 + ty2) . Заметьте, что это верно, если в цепочке трансформаций между ними не стоит трансформации другого типа. Обратный сдвиг translate(tx, ty) делается при помощи другого сдвига translate(-tx, -ty) .

Поворот

2D-поворот перемещает элемент и любые его потомки, если они есть, вокруг фиксированной точки (точки, положение которой сохраняется, следуя за трансформацией). Конечный результат зависит от положения этой фиксированной точки. Два поворота на один и тот же угол вокруг двух разных точек приведут к разным результатам. Так же, как и сдвиг, поворот не деформирует элемент и сохраняет параллельность, углы и расстояния. Последовательные трансформации rotate() вокруг той же фиксированной точки складываются, как и в случае со сдвигом. Поворот в обратную сторону делается при помощи другого поворота на тот же угол в обратном направлении вокруг той же самой точки.

Рисунок 2: базовая трансформация поворота: HTML-элементы (слева) напротив SVG-элементов (справа)

На рисунке выше представлено сравнение примеров с HTML (слева) и SVG (справа). Полупрозрачные рисунки элементов — это их исходное положение (до применения поворота). Поворот перемещает элементы и их системы координат вокруг фиксированного начала координат, и это же произойдет с любыми потомками наших элементов, если таковые будут.

В случае с HTML, начальная точка системы координат элемента находится в 50% 50% элемента, поэтому все поворачивается вокруг этой точки. Однако, в случае с SVG, исходная точка находится в 0 0 SVG-холста (если мы не применяли трансформации ни к каким возможным предкам элемента в пределах элемента ), в результате чего всё будет перемещаться вокруг этой точки.

Для CSS-трансформаций функция 2D-поворота довольно простая: только rotate(angle) . Значение angle может быть представлено в градусах ( deg ), радианах ( rad ), оборотах ( turn ) или градах ( grad ). Также мы можем использовать значение calc() (например, что-нибудь типа calc(.25turn — 30deg) ), но на данный момент это работает только в Chrome 38+/ Opera. Если вы используете положительное значение угла, тогда поворот будет идти по часовой стрелке (и наоборот, при отрицательном значении угла, поворот будет идти против часовой стрелки).

В случае с атрибутами для SVG-трансформации, функция поворота немного отличается — rotate(angle[ x y]) . Значение angle работает аналогичным с функцией CSS-трансформации способом (положительное значение означает поворот по часовой стрелке, отрицательное значение — против часовой), но значение градусов должно быть безрамерным. Необязательные безразмерные параметры x и y указывают координаты фиксированной точки, вокруг которой мы поворачиваем элемент (и его систему координат). Если они опущены, тогда фиксированной точкой будет начальная точка системы координат. Если указать только параметры angle и x , значение будет невалидным и трансформация не применится.

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

Заметьте, что наличие параметров x и y не означает, что начальная точка системы координат переместится в эту точку. Система координат, как и сам элемент (и любые потомки, если они есть) просто будут вращаться вокруг точки x y .

Это означает, что у нас есть два равнозначных способа поворота SVG-элемента (результат можно увидеть справа на предыдущем рисунке):

• применение атрибута для SVG-трансформации:

Также в CSS мы можем указать значение transform-origin , чтобы сымитировать применение параметров x и y . Значения длины указываются относительно системы координат элемента, а процентные значения — относительно самого элемента, поэтому они, кажется, идеальны для того, что мы хотели получить. Однако, нам надо учитывать две вещи.

Во-первых, CSS transform-origin и фиксированная точка, указанная в функции rotate() — не одно и тоже. В качестве очень простого примера, скажем, возьмем всего лишь поворот вокруг точки 50% 50% в SVG, не столь важно. Рассмотрим два случая:

В обоих случаях элемент должен поворачиваться одинаково (должен, если поддерживается браузером, но это уже другая история), как видно на следующем рисунке:

Рисунок 3: вращение SVG-элемента вокруг установленной точки: применение CSS (слева) и атрибута для SVG-трансформации (справа)

Это показывает разницу между ними. При использовании CSS, система координат элемента сначала перемещается от точки 0 0 SVG-холста в точку 50% 50% элемента. Затем элемент поворачивается. При использовании атрибута для SVG-трансформации, элемент и его система координат просто поворачивается вокруг точки, указанной во втором и третьем аргументе функции rotate() , точки, координаты которой мы вычислили так, чтобы она находилась в точке 50% 50% элемента. Начальная точка системы координат элемента по-прежнему находится снаружи элемента, и эта начальная точка будет влиять на любые последующие трансформации, зависящие от неё.

Чтобы лучше это понять, давайте укажем другой поворот (сразу после первого), который поворачивает элемент на 45° в противоположном направлении:

Рисунок 4: цепочка поворотов для SVG-элемента: CSS-трансформации (слева) и атрибут для SVG-трансформации (справа)

Как показано на рисунке выше, при использовании CSS-трансформации и установке transform-origin в 50% 50% , два поворота компенсируют друг друга, но при использовании SVG-атрибута transform , фиксированная точка, вокруг которой мы поворачиваем элемент, различается между двумя поворотами — она является точкой 50% 50% элемента для первого поворота и начальной точкой системы координат элемента для второго. В этой ситуации поворот в обратную сторону делается легко; просто используйте rotate(-45 140 105) вместо rotate(-45) .

Однако, это не отменяет того факта, что у нас есть только один transform-origin (поскольку у системы координат элемента есть только одна начальная точка), но при использовании SVG-атрибута transform , мы можем применять множественные повороты, каждый из которых поворачивает элемент вокруг разной точки. Поэтому, если мы хотим сначала повернуть наш прямоугольник на 90° вокруг его нижнего правого угла, а затем ещё на 90° вокруг его верхнего правого угла, то это легко сделать при помощи атрибута для SVG-трансформации — мы просто указываем разные фиксированные точки для каждого поворота.

Рисунок 5: цепочка поворотов вокруг разных фиксированных точек (атрибут для SVG-трансформации)

Но как нам получить тот же самый эффект при помощи CSS-трансформаций? Это легко сделать для первого поворота, поскольку можно установить transform-origin в right bottom , но как быть со вторым поворотом? Если дописать его в CSS-правиле после первого, то он просто повернёт элемент ещё на 90° вокруг той же самой точки ( right bottom ).

Нам нужно три сцепленных трансформации, для того, чтобы поворот элемента вокруг фиксированной точки не зависел от того, где находится его transform-origin . Во-первых, это трансформация translate(x, y) , которая переместит начальную точку системы координат элемента таким образом, чтобы она совпадала с фиксированной точкой, вокруг которой мы хотим всё поворачивать. Во-вторых, это сам поворот. И наконец, в-третьих, это translate(-x, -y) — противоположность первому сдвигу.

В этом случае наш код мог бы быть таким:

На нижнем рисунке показано, как это работает, шаг за шагом:

Рисунок 6: иллюстрация того, как работает цепочка CSS-трансформаций

Вторая проблема с transform-origin , это то, что в Firefox работают только значения длины. Процентные значения и ключевые слова — нет, поэтому нам придется заменять их значениями длины. И процентные значения внутри трансформаций translate() , также не работают в Firefox.

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

Масштабирование изменяет расстояние от начала координат элемента до любой точки элемента (и любых потомков, если таковые есть) на тот же коэффициент в указанном направлении. Если коэффициент не одинаковый во всех направлениях — в случае чего получается равномерное масштабирование — форма элемента не сохраняется.

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

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

Рисунок 7: трансформация масштабирования: HTML-элементы (слева) и SVG-элементы (справа)

На рисунке выше представлено сравнение примеров с HTML (слева) и SVG (справа). В обоих случаях мы масштабируем элемент, используя коэффициент масштабирования sx вдоль оси x и sy вдоль оси y . Разница в положении начальной точки системы координат элемента, которая в случае с HTML находится в точке 50% 50% элемента, а в случае с SVG в точке 0 0 SVG-холста (если мы не применяли трансформации ни к каким возможным предкам элемента в пределах элемента ).

При использовании CSS-трансформаций у нас есть три функции масштабирования, которые доступны для 2D-трансформаций: scale(sx[, sy]) , scaleX(sx) и scaleY(sy) . Первая функция масштабирует элемент на sx вдоль оси x и на sy вдоль оси y . Параметр sy необязательный, и если он не указан, то предполагается, что он равен sx , делая таким образом масштабирование одинаковым во всех направлениях. sx и sy всегда являются безразмерными значениями. Другие две функции действуют только в направлениях x и y (как указано системой координат элемента), соответственно. scaleX(sx) равнозначно scale(sx, 1) или просто scale(sx) , а scaleY(sy) равнозначно scale(1, sy) . Если другая трансформация применяется до масштабирования, направления x и y могут уже не быть горизонтальным и вертикальным, соответственно.

Илон Маск рекомендует:  Что такое код asp logodbcdatasource

В случае с атрибутами для SVG-трансформации у нас есть только функция scale(sx[ sy]) . Снова, значения здесь могут разделяться пробелами, а не только запятыми, как в аналогичной функции CSS-трансформации.

Поэтому для SVG-элементов следующие два метода масштабирования равнозначны:

• применение атрибута для SVG-трансформации

Эти функции приводят к одинаковому результату, как показано в правой части рисунка 7. Но что, если мы хотим получить тот же самый эффект, который мы получаем при применении той же функции масштабирования для HTML-элемента? Ну, мы можем делать это также, как и в поворотах.

С CSS-трансформациями у нас есть выбор: либо задать нашему SVG-элементу правильный transform-origin , либо добавить в цепочку трансформаций сдвиги до и после масштабирования — сначала мы сдвигаем систему координат так, что ее начало оказывается в точке 50% 50% нашего SVG-элемента, затем масштабируем, а затем обращаем первый сдвиг. С SVG-атрибутом transform у нас есть только вариант с цепочкой трансформаций. Так что код для вышеописанного случая был бы таким:

• Применение CSS-трансформации при помощи transform-origin

• Применение цепочки CSS-трансформаций

• Применение функций цепочки трансформаций в виде значения для атрибута SVG-трансформации

Следующий демо-пример иллюстрирует, как работает метод с цепочкой трансформаций (нажмите кнопку «воспроизведение» (►) для старта):

Что ещё нужно помнить о масштабировании — это что две последовательные трансформации scale() ( scale(sx1, sy1) scale(sx2, sy2) ) могут быть записаны как scale(sx1*sx2, sy1*sy2) , а обратная трансформация делается при помощи scale(1/sx1, 1/sy1) . Если все коэффициенты масштаба по модулю равны 1 , то такое масштабирование — само себе обратная трансформация.

Наклон

Наклон элемента вдоль оси смещает каждую из его точек (кроме тех, которые находятся точно на оси наклона) в этом направлении на ту величину, которая зависит от угла наклона и расстояния между этой точкой и осью наклона. Это значит, что изменяется только координата вдоль оси наклона, а координата вдоль другой оси остаётся неизменной. В отличие от поворота, наклон деформирует элемент, превращая квадраты в неравносторонние параллелограммы, а круги в эллипсы. Наклон не сохраняет углы (при наклоне на угол α 90-градусные углы прямоугольного элемента становятся 90° ± α ) или длина любого сегмента не параллельна оси наклона. Однако, площадь элемента сохраняется.

В отличие от сдвига или поворота, наклоны не складываются. Наклон элемента вдоль оси на угол α1 , а затем наклон снова вдоль той же оси на другой угол α2 — не то же самое, что наклон элемента вдоль этой оси на угол α1 + α2 .

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

Угол наклона — это угол между конечным и исходным положением оси, которая изменяется после применения трансформации (а не оси, вдоль которой мы наклоняем элемент). Положительный угол наклона в интервале [0°, 90°] добавляет значение того же знака, что у неизменной координаты, к исходному значению меняющейся координаты, которая изменилась (координата вдоль угла наклона), а отрицательное значение в интервале [-90°, 0°] добавляет значение, знак которого является противоположным этой фиксированной координаты.

Если мы делаем наклон вдоль оси x , то для любой точки нашего элемента координата y этой точки остаётся такой же, а координата x изменяется на величину d в зависимости от угла наклона и от фиксированной координаты y (где-то на 15-й минуте этого доклада поясняется, как величина d может быть вычислена). Верхняя и нижняя стороны (и любой другой сегмент, параллельный оси x ) остаются той же длины, а левая и правая стороны становятся длиннее по мере увеличения угла наклона, уходя в бесконечность в случае угла ±90° . Как только это значение превышается, они начитают становиться короче, пока мы не получим угол в ±180° .

Заметьте, что результат наклона на угол в интервале (90°, 180°] равнозначен результату наклона на угол α — 180° > (который в конечном итоге оказался бы в интервале (-90°, 0°] ). Также результат наклона на угол в интервале (-180°, -90°] равнозначен результату наклона на угол — α + 180° (который в конечном итоге оказался бы в интервале [0°, 90°))

Если мы делаем наклон вдоль оси y , то координата x остаётся такой же для любой точки нашего элемента, а координата y изменяется на величину d в зависимости от угла наклона и от фиксированной координаты x . Правая и левая стороны (и любой другой сегмент, параллельный оси y ) остаются той же длины, а верхняя и нижняя стороны становятся длиннее по мере увеличения угла наклона, уходя в бесконечность в случае угла ±90° . Как только это значение превышается, они начитают становиться короче, пока мы не получим угол в ±180° .

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

Рисунок 8: трансформация наклона: HTML-элементы (слева) и SVG-элементы (справа)

На рисунке выше представлено сравнение примеров с HTML (слева) и SVG (справа). В обоих случаях, мы наклоняем наши элементы вдоль оси x на тот же угол наклона. Разница в положении начальной точки системы координат элемента, которая в случае с HTML находится в точке 50% 50% элемента, а в случае с SVG в точке 0 0 SVG-холста (если мы не применяли трансформации ни к каким возможным предкам элемента в пределах элемента в случае с SVG).

Для простоты, давайте сосредоточимся на том, что случается только с одной точкой наших элементов: верхний правый угол. В обоих случаях координата y сохраняет своё положение — точка не двигается по вертикали, только по горизонтали. Однако, в случае HTML мы видим, что по горизонтали этот угол двигается влево (в отрицательном направлении оси x ), а в случае с SVG вправо. А нижний правый угол двигается вправо, по мере наклона, как в HTML, так и в случае с SVG. Итак, как это работает?

Ну, как упоминалось выше, при наклоне вдоль оси x , координата y любой точки остаётся такой же, хотя к исходной точке координаты x той же точки мы добавляем величину d , которая зависит от угла наклона и от фиксированной координаты y . Эта величина d совпадает по знаку с фиксированной координатой y , если угол наклона находится в интервале [0°, 90°] , и противоположна ей по знаку, если угол наклона находится в интервале [-90°, 0°] .

В обоих случаях наш угол 60° , поэтому дело решает знак координаты y верхнего правого угла. В случае с HTML начальная точка системы координат элемента находится в точке 50% 50% элемента, координата y верхнего правого угла элемента является отрицательной, поскольку ось y направлена вниз. Однако, в случае с SVG, где начальная точка системы координат элемента находится в точке 0 0 SVG-холста, координата y верхнего правого угла элемента положительна. Это означает, что в случае с HTML мы добавляем отрицательную величину к исходной точке координаты x верхнего правого угла, заставляя его двигаться влево, а в случае с SVG мы добавляем положительную величину к исходной координате x верхнего правого угла, заставляя его двигаться вправо.

Независимо от того, наклоняем ли мы SVG-элемент при помощи CSS-трансформаций или атрибута для SVG-трансформации, нам доступны две функции: skewX(angle) и skewY(angle) . Первая функция наклоняет элемент вдоль оси x , а вторая наклоняет его вдоль оси y .

В CSS-трансформациях значение angle указывается с единицей измерения. Оно может быть представлено в градусах ( deg ), радианах ( rad ), оборотах ( turn ), градах ( grad ) или даже в виде calc() , чтобы комбинировать любые эти единицы измерения (но имейте ввиду, что на данный момент calc() с единицами измерения для угла работает только в браузерах на движке Blink)

При наклоне элемента с помощью атрибута для SVG-трансформации наше значение angle всегда представляет безразмерное значение градусов.

Это означает, что у нас есть два равнозначных способа наклона SVG-элемента (результат можно видеть на предыдущем рисунке справа):

• использование атрибута для SVG-трансформации:

Если вы хотите получить тот же самый эффект, который мы получаем при применении аналогичной функции наклона для HTML-элемента, то для этого у нас есть три способа, как и при масштабировании:

• использование CSS-трансформации при помощи transform-origin

• использование цепочки CSS-трансформаций

• использование цепочки функций трансформации в виде значения атрибута для SVG-трансформации:

Следующий демо-пример иллюстрирует как работает «цепочный» метод:

Сокращение цепочки

Всё в порядке, цепочки трансформаций делают своё дело. Можно поворачивать, масштабировать и наклонять SVG-элементы, и они ведут себя так же, как вели бы и HTML-элементы при тех же самых трансформациях. А если мы применяем цепочку трансформаций в виде значения для SVG-атрибута, то у нас даже есть возможность получить желаемый результат в IE. Но это уродство! Неужели нет более простого способа сделать это?

Ну, если мы начнём с нашего SVG-прямоугольника, точка 50% 50% которого находится в точке 0 0 SVG-холста, то мы можем «вырезать» один сдвиг в нашей цепочке, сокращая наш код поворота:

Мы также могли бы избавиться от первого сдвига при помощи правильно подобранного атрибута viewBox для элемента , содержащего наш прямоугольник. У атрибута viewBox есть четыре значения, которые разделены пробелом. Первые два указывают координаты x и y верхнего левого угла SVG-холста в пользовательских единицах измерения, а другие две указывают его width и height в пользовательских единицах измерения. Если атрибут viewBox не указан, то координаты верхнего левого угла будут 0 0 .

Ниже можно увидеть разницу между элементом , у которого не указан viewBox , и элементом с viewBox=’-140 -105 280 210′ :

Рисунок 9: Элемент , у которого не указан атрибут viewBox , и элемент с viewBox

Возвращаясь к нашему примеру, если мы установим viewBox так, чтобы точка 0 0 SVG-холста разместилась там, где у нас находится точка 50% 50% нашего прямоугольника, то наш код станет таким:

Практическое применение

Размещение точки 0 0 нашего SVG-холста и любого другого желаемого элемента прямо в середине облегчает работу с трансформациями, потому что в этом случае точка 0 0 SVG-холста совпадает с точкой 50% 50% элемента, который мы хотим трансформировать. Следующий демо-пример (жмите воспроизведение/пауза) показывает три четырёхконечные звёзды, которые изначально расположены в середине, а затем повёрнуты, смещены, наклонены и сжаты без необходимости в установке transform-origin или в добавлении сдвигов в цепочке:

Давайте рассмотрим, как работает это демо шаг за шагом.

Создается звезда очень легко — простой многоугольник с восемью точками. Демо-пример ниже показывает, как они позиционируются относительно начальной точки ( 0 0 ) SVG-холста. Наводите мышкой на пары x,y в коде или на сами точки, чтобы увидеть что чему соответствует.

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

Первое, что мы сделаем, это отмасштабируем наши звёзды от 0 до 1 :

Это даст нам следующий результат:

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

Вы можете посмотреть результат в коде ниже:

Следующим шагом будет сдвиг и масштабирование нашей звезды:

Мы почти у цели! Нам просто надо наклонить звёзды и применить трансформацию для масштабирования, чтобы подправить их размеры после наклона.

Здесь я добавила больше одного ключевого кадра для точности. В то время как угол наклона изменяется линейно, корректирующий коэффициент масштаба — нелинейно, его значение — это косинус угла наклона, и как видно на следующем изображении, график функции косинуса между 0° и 90° — не прямая.

Рисунок 10: график синуса (синий) и косинуса (красный)

Однако, этот пример на чистом CSS немного глючит в Firefox и не работает ни в каком IE, поскольку ни одна из версий IE не поддерживает CSS-трансформации для SVG-элементов. Всё это можно исправить, если использовать атрибуты для SVG-трансформации и анимировать их значения при помощи JavaScript. Вы можете посмотреть JavaScript-версию ниже (нажмите, чтобы запустить).

P.S. Это тоже может быть интересно:

Если вам понравилась статья, поделитесь ей!

Трансформации, переходы и анимации

Трансформации

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

Вращение

Для поворота элемента свойство transform использует функцию rotate :

После слова rotate в скобках идет величина угла поворота в градусах. Например, повернем блок на 30 градусов:

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

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

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

Применение масштабирования имеет следующую форму:

Значение больше 1 приводит к растяжению по вертикали и горизонтали, а меньше 1 — к сжатию. То есть значение 0.5 приводит к уменьшению в два раза, а значение 1.5 — к увеличению в полтора раза.

Можно также задать величины масштабирования отдельно для вертикали и горизонтали:

В данном случае по горизонтали будет идти масштабирование в 2 раза, а по вертикали — в 0.5 раз.

Также можно по отдельности задать параметры масштабирования: функция scaleX() задает изменение по горизонтали, а scaleY() — по вертикали. Например:

Используя отрицательные значения, можно создать эффект зеркального отражения:

Перемещение

Для перемещения элемента используется функция translate :

Значение offset_X указывает, на сколько элемент смещается по горизонтали, а offset_Y — по вертикали.

К примеру, сместим блок на 30 пикселей вниз и на 50 пикселей вправо:

В качестве единиц измерения смещения можно применять не только пиксели, но и любые другие единицы измерения длины в CSS — em, % и тд.

С помощью дополнительных функций можно отдельно применять смещения к горизонтали или вертикали: translateX() (перемещение по горизонтали) и translateY() (перемещение по вертикали). Например:

Кроме положительных значений также можно использовать и отрицательные — они перемещают элемент в противоположную сторону:

Наклон

Для наклона элемента применяется функция skew() :

Первый параметр указывает, на сколько градусов наклонять элемент по оси X, а второй — значение наклона по оси Y.

Для создания наклона только по одной оси для другой оси надо использовать значение 0. Например, наклон на 45 градусов по оси X:

Или наклон на 45 градусов только по оси Y:

Для создания наклона отдельно по оси X и по оси Y в CSS есть специальные функции: skewX() и skewY() соответственно.

Также можно передавать отрицательные значения. Тогда наклон будет осуществляться в противоположную сторону:

Комбинирование преобразований

Если нам надо применить к элементу сразу несколько преобразований, скажем, вращаение и перемещение, то мы можем их комбинировать. Например, применение всех четырех преобразований:

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

Исходная точка трансформации

По умолчанию при применении трансформаций браузер в качестве точки начала преобразования использует центр элемента. Но с помощью свойства transform-origin можно изменить исходную точку. Это свойство в качестве значения принимает значения в пикселях, em и процентах. Также для установки точки можно использовать ключевые слова:

CSS3 — трансформации

Когда мы изучали возможности HTML5 Canvas, то затронули возможность трансформаций — способов перемещения, масштабирования, наклона и вращения содержимого. На холсте трансформации можно использовать для изменения рисуемой на нем графики. А трансформации CSS3 служат для изменения внешнего вида элементов. Далее мы рассмотрим каждый вид CSS3-трансформаций.

Поворот

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

В предыдущем примере с помощью свойства трансформаций transform задается функция rotate(), которая вращает элемент на 45° вокруг его центра:

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

Обратите внимание, что в предыдущем примере угол поворота задавался в градусах. Спецификация CSS3 предлагает возможность задавать угол и в других математических величинах:

Единицы измерения угла поворота CSS3-трансформации

Единица измерения CSS3-обозначение Описание Пример
Градусы deg Угол полной окружности 360° rotate(90deg)
Грады grad Единица измерения плоских углов, равная 1/400 угла полной окружности или π/200 rotate(100grad)
Радианы rad 2π радиан равно углу полной окружности rotate(1.57rad)
Обороты turn 1 угол полной окружности равен одному обороту rotate(.25turn)

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

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

Для использования анимации масштабирования используется функция scale(). Значение масштаба задается относительно единицы: scale(2) — исходный элемент будет увеличен в два раза, scale(0.5) — элемент уменьшается в два раза. Согласно этим правилам элемент масштабируется одинаково во все стороны, но вы можете задать направление: X — по горизонтали, Y — по вертикали, Z — глубина масштабирования.

Более того, функцию scale() можно использовать для создания эффекта отражения. Для этого нужно передать отрицательное значение в функцию scale(). Давайте рассмотрим некоторые примеры масштабирования. Для начала уменьшим нашу картинку с текстом в два раза:

Теперь растянем элемент в два раза по оси X:

Как видите здесь уже используется функция scaleX(), которая масштабирует элемент относительно оси X. И наконец, используем эффект отражения:

Перемещение

Для перемещения HTML-элемента используется функция translate(x,y), либо ее аналоги для конкретных осей translateX(x), translateY(y). Эти функции поддерживают отрицательные значения (сдвиг влево или вверх). Ниже показан пример использования трансформации перемещения:

Искажение

Трансформация skew() искажает форму элемента. Например, возьмем правильный прямоугольник с закрепленным основанием. Если мы начнем толкать его верхнюю часть в сторону, то она сместится, в то время как основание останется на месте. В результате получим параллелограмм:

Илон Маск рекомендует:  Таблицы в HTML

Значение искажения задается в градусах (можно указывать такие же единицы измерения, как и для трансформации поворота). Ниже показан пример использования трансформации искажения:

Использование нескольких трансформаций

Вы можете объединить несколько трансформаций двумя способами: указать несколько трансформаций в одном правиле, разделив их пробелами или использовать , которая позволяет комбинировать несколькими трансформациями с помощью математической матрицы. Более подробно о матричной трансформации вы можете прочитать на сайте разработчиков браузера Opera — CSS Transforms Matrix, а ниже мы рассмотрим пример группирования нескольких трансформаций в одном правиле:

Сначала элемент увеличивается в полтора раза (используя трансформацию scale), потом перемещается на 10 пикселов влево (посредством трансформации translateX) и, наконец, наклоняется и поворачивается (используя трансформации skew и rotate).

CSS :: Трансформация

Трансформация элемента и свойство transform

Трансформация элементов в CSS представляет собой возможность сдвигать, поворачивать, масштабировать, а также наклонять (деформация сдвига) элементы. При этом существует два вида css -трансформаций: 2D -трансформации на плоскости и 3D -трансформации в пространстве. Осуществляются такие трансформации при помощи анимируемого ненаследуемого css -свойства transform, которое в качестве значений принимает ряд специальных функций, как раз и позволяющих трансформировать элементы должным образом. Перечислим эти функции:

  • translate() – сдвигает элемент на плоскости вдоль осей X и Y ;
  • translateX() – сдвигает элемент вдоль оси X ;
  • translateY() – сдвигает элемент вдоль оси Y ;
  • translateZ() – сдвигает элемент вдоль оси Z ;
  • translate3d() – сдвигает элемент в трехмерном пространстве;
  • scale() – масштабирует элемент на плоскости;
  • scaleX() – масштабирует элемент вдоль оси X ;
  • scaleY() – масштабирует элемент вдоль оси Y ;
  • scaleZ() – масштабирует элемент вдоль оси Z ;
  • scale3d() – масштабирует элемент в трехмерном пространстве;
  • rotate() – поворачивает элемент на требуемый угол на плоскости относительно точки трансформации, которая задается свойством transform-origin ;
  • rotateX() – поворачивает элемент на требуемый угол относительно оси X ;
  • rotateY() – поворачивает элемент на требуемый угол относительно оси Y ;
  • rotateZ() – поворачивает элемент на требуемый угол относительно оси Z ;
  • rotate3d() – поворачивает элемент в трехмерном пространстве;
  • skew() – наклоняет элемент на заданный угол на плоскости;
  • skewX() – наклоняет элемент вдоль оси X ;
  • skewY() – наклоняет элемент вдоль оси Y ;
  • matrix() – задает двумерную матрицу преобразований, объединяя несколько функций в одной;
  • matrix3d() – задает трехмерную матрицу преобразований;
  • perspective() – задает перспективу (глубину сцены);
  • none – отменяет эффекты трансформации для данного элемента.

Если необходимо применить к элементу сразу несколько трансформаций, то свойству transform разрешается передавать требуемое количество функций, перечисляя их через пробел (см. примеры ниже). При этом важно помнить, что порядок перечисления функций имеет значение, т.к. трансформации будут выполняться последовательно.

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

Функция трансформации translate()

Функция трансформации translate() позволяет сдвигать элемент на плоскости вдоль осей X и Y . В качестве параметров функция может принимать два значения в виде любых допустимых в CSS единиц измерения длины, как положительных, так и отрицательных. Первое значение смещает элемент в горизонтальном направлении вдоль оси X (если значение больше нуля, то элемент сдвигается вправо, а если отрицательное, то влево), а второе предназначено для смещения в вертикальном положении вдоль оси Y (если значение больше нуля, то элемент сдвигается вниз, а если отрицательное, то вверх). Второе значение разрешается не указывать, тогда трансформируемый элемент будет сдвигаться только в горизонтальном направлении вдоль оси X (см. пример №1).

Пример №1. Функция трансформации translate()

Функция трансформации scale()

Функция трансформации scale() дает возможность масштабирования элемента на плоскости, принимая в качестве параметров два числа, первое из которых масштабирует элемент в горизонтальном направлении, а второе — по вертикали. Значение параметра большее единицы (например, 1.7 ), приводит к увеличению масштаба элемента, меньшее единицы (например, 0.8 ) — к уменьшению масштаба. Если же значение еще и меньше нуля, то элемент не только масштабируется, но также и зеркально отражается относительно соответствующей оси (см. пример №2). Отметим, что значение параметра равное единице не изменяет масштаб элемента.

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

Пример №2. Функция трансформации scale()

Функция трансформации rotate()

Функция трансформации rotate() позволяет поворачивать элемент на плоскости вокруг точки трансформации на требуемый угол (см. пример №3). Точка трансформации по умолчанию располагается в центре элемента и может быть изменена при помощи свойства transform-origin (см. ниже). В качестве значений функция rotate() принимает все доступные в CSS единицы измерения углов: градусы (например, rotate(30deg) ), грады (например, rotate(100grad) ), радианы (например, rotate(-3.15rad) ) или же просто обороты (например, rotate(2.5turn) ). При этом положительные значения угла приводят к повороту элемента по часовой стрелке, отрицательные — против.

Пример №3. Функция трансформации rotate()

Функция трансформации skew()

Функция трансформации skew() используется для наклона (деформации сдвига) элемента на плоскости вдоль осей X и Y , принимая в качестве параметров значения углов: первое значение задает угол наклона элемента в горизонтальном направлении (если значение больше нуля, то элемент наклоняется влево, а если отрицательное, то вправо), второе значение задает угол наклона элемента по вертикали (если значение больше нуля, то элемент наклоняется вниз, а если отрицательное, то вверх). Опять же, разрешается использовать любые доступные в CSS единицы измерения углов: градусы, грады, радианы или же просто обороты (например, skew(2.5turn, -30deg) ). При этом вместо нулевых значений допустимо использовать просто нуль, а второе значение можно не указывать вообще, тогда трансформируемый элемент будет наклоняться только в горизонтальном направлении вдоль оси X (см. пример №4).

Пример №4. Функция трансформации skew()

Функция трансформации matrix()

Функция трансформации matrix() позволяет трансформировать элементы, совмещая в себе возможности сразу нескольких функций трансформации (см. пример №5). В качестве параметров она принимает через запятую шесть значений:

  • scaleX – изменяет масштаб элемента по горизонтали: значение от 0 до 1 уменьшает (сжимает) элемент вдоль оси X , больше 1 — увеличивает (расширяет) его;
  • skewY – наклоняет элемент по вертикали (сдвиг вертикальных сторон элемента друг относительно друга вдоль оси Y ): если значение больше нуля, то элемент наклоняется вверх, а если отрицательное, то вниз;
  • skewX – наклоняет элемент по горизонтали (сдвиг горизонтальных сторон элемента друг относительно друга вдоль оси X ): если значение больше нуля, то элемент наклоняется влево, а если отрицательное, то вправо;
  • scaleY – изменяет масштаб элемента по вертикали: значение от 0 до 1 уменьшает (сжимает) элемент вдоль оси Y , больше 1 — увеличивает (расширяет) его;
  • translateX – смещает элемент на указанное число пикселей по горизонтали: если значение больше нуля, то элемент сдвигается вправо, а если отрицательное, то влево;
  • translateY – смещает элемент на указанное число пикселей по вертикали: если значение больше нуля, то элемент сдвигается вниз (опускается), а если отрицательное, то вверх (поднимается).

Пример №5. Функция трансформации matrix()

Функция perspective()

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

Одной из таких возможностей является функция perspective() , которая задает глубину просмотра ( 3d -перспективу), т.е. расстояние по оси Z от плоскости экрана до точки сходимости линий. В результате создается впечатление приближения либо отдаления элемента от зрителя (см. рис №6).

Рис. №6. Зависимость масштабирования вдоль оси Z от 3d-перспективы

Масштабирование элемента пропорционально d/(d–z) , где d (значение перспективы) — это расстояние от плоскости экрана до предполагаемого положения глаз зрителя, а Z — координата желаемого расположения плоскости элемента на оси Z , направленной к пользователю. Так на верхнем рисунке, чтобы создать для пользователя впечатление, что исходный круг (изображен сплошным контуром) на экране стал ближе к нему в два раза (круг изображен пунктиром), его размер также необходимо увеличить в два раза (голубой круг), т.к. d/(d–d/2)=2 (здесь z=d/2 ). На нижнем рисунке изображена ситуация, когда у пользователя создается впечатление, что исходный круг на экране удалился от него на половину расстояния от пользователя до экрана. Для этого потребовалось уменьшить размер исходного круга на треть, т.к. d/(d–(-d/2))=d/(d+d/2)=2/3 (здесь z=-d/2 ).

В качестве параметра функция perspective() принимает любые доступные в CSS единицы измерения длины (если не указаны, то по умолчанию будут использованы пиксели). При этом чем больше будет положительное значение, тем менее будет выражен эффект перспективы (элемент будет все больше удаляться от зрителя), и наоборот, при уменьшении положительного значения эффект перспективы становится более выраженным (элемент будет все больше приближаться к зрителю). Что касается отрицательных значений и нуля, то они отменяют действие перспективы (см. пример №7). Однако следует иметь в виду, что если перспективу не задавать, то будут отсутствовать и эффекты трансформации в трехмерном пространстве, например, повороты элемента вокруг осей X и Y или его перемещение вдоль оси Z .

Пример №7. Функция трансформации perspective()

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

css-свойство perspective

Когда 3D -перспектива задается с помощью функции perspective() , 3D -пространство активируется только для одного элемента. Если же требуется обеспечить одинаковую перспективу для всех дочерних элементов родителя, то можно использовать специальное ненаследуемое css -свойство perspective, которое активирует 3D -пространство внутри элемента-родителя и будет применено ко всем дочерним элементам сразу. В результате такой манипуляции отпадает необходимость использовать функцию для каждого дочернего элемента. При этом в случае необходимости для конкретных элементов всегда можно будет использовать функцию perspective() , переопределив значение свойства (см. пример №8).

Что касается значений, то свойство perspective может принимать:

  • длина – любые доступные в CSS единицы измерения длины (если не указаны, то по умолчанию будут использованы пиксели), при этом чем больше положительное значение, тем менее выражен эффект перспективы, и наоборот; отрицательные значения и нуль отменяют действие перспективы;
  • none – отменяет действие перспективы (используется по умолчанию).

Пример №8. Использование css-свойства perspective

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

css-свойство perspective-origin

По умолчанию точка сходимости линий (т.е. точка расположения глаз зрителя при взгляде на экран) при использовании свойства perspective находится на оси, проходящей через центр элемента перпендикулярно плоскости экрана (см. рис. №9). Однако эту точку можно смещать, изменяя ее координаты X и Y . Делается это при помощи ненаследуемого css -свойства perspective-origin, которое должно использоваться совместно с perspective для родительского блока и свойством transform для дочернего элемента.

Рис. №9. Пример смещения точки сходимости линий при использовании перспективы

В качестве значений perspective-origin принимает через пробел координаты X и Y точки сходимости линий (см. пример №10). Для них разрешается использовать:

  • для координаты X – любые доступные в CSS единицы измерения длины, проценты (по умолчанию X=50% ), а также ключевые слова left (эквивалентно 0% по оси X ), center (эквивалентно 50% по оси X ) или right (эквивалентно 100% по оси X );
  • для координаты Y – любые доступные в CSS единицы измерения длины, проценты (по умолчанию Y=50% ), а также ключевые слова top (эквивалентно 0% по оси Y ), center (эквивалентно 50% по оси Y ) или bottom (эквивалентно 100% по оси Y ).

Отметим, что за начало координат при расчетах принимается левый верхний угол элемента, а проценты рассчитываются относительно его ширины. При этом разрешается использовать не только положительные, но и отрицательные значения координат. Кроме того, если передать свойству perspective-origin только одно значение, то оно будет считаться координатой X , а для координаты Y будет использовано значение по умолчанию.

Пример №10. Пример использования css-свойства perspective-origin

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

css-свойство transform-origin

С расположением точки сходимости линий и возможностью ее смещения в плоскости, которая проходит параллельно экрану через эту точку, мы разобрались. Однако на результат трансформации влияет также и расположение еще одной важной точки, называемой центром (точкой) трансформации. По умолчанию трансформация элемента происходит относительно точки трансформации, которая находится в плоскости экрана в центре трансформируемого элемента (см. рис №11). Однако эту точку можно смещать, изменяя ее координаты X , Y и Z (координаты отсчитываются от левого верхнего угла элемента). Делается это при помощи ненаследуемого css -свойства transform-origin, которое используется совместно с transform.

Рис. №11. Расположение центра трансформации по умолчанию

В качестве значений transform-origin принимает через пробел координаты X , Y и Z центра трансформации (см. пример №12). Для них разрешается использовать:

  • для координаты X – любые доступные в CSS единицы измерения длины, проценты (по умолчанию X=50% ), а также ключевые слова left (эквивалентно 0% по оси X ), center (эквивалентно 50% по оси X ) или right (эквивалентно 100% по оси X );
  • для координаты Y – любые доступные в CSS единицы измерения длины, проценты (по умолчанию Y=50% ), а также ключевые слова top (эквивалентно 0% по оси Y ), center (эквивалентно 50% по оси Y ) или bottom (эквивалентно 100% по оси Y ).
  • для координаты Z – любые доступные в CSS единицы измерения длины, исключая проценты и ключевые слова.

Опять же, за начало координат при расчетах принимается левый верхний угол элемента, а проценты рассчитываются относительно его размеров. При этом разрешается использовать не только положительные, но и отрицательные значения координат. Кроме того, если передать свойству transform-origin только одно значение, то оно будет считаться координатой X , если два, то X и Y (соответственно неуказанные координаты примут значения по умолчанию).

Пример №12. Пример использования css-свойства transform-origin

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

css-свойство transform-style

Когда мы трансформируем родительский элемент в трехмерном пространстве, то все дочерние элементы по умолчанию отрисовываются в двумерном пространстве своего родителя, т.е. располагаются в его плоскости и могут без проблем подвергаться 2D -трансформациям. Но если мы попробуем применить к дочерним элементам 3D -трансформации, то результат нас не очень обрадует, т.к. точки трехмерного пространства все равно будут спроецированы на плоскость родительского элемента и мы получим совсем не то, что ожидали (см. пример №13). Для решения этой проблемы и возможности активации для дочерних трансформируемых элементов собственного 3D -пространства в CSS предусмотрено ненаследуемое свойство transform-style, которое применяется к родительскому контейнеру и определяет, как дочерние трансформированные элементы (т.е. элементы, для которых будет задано свойство transform) будут отображаться в 3D -пространстве:

  • flat – будут трансформироваться в плоскости родителя (используется по умолчанию);
  • preserve-3d – будут трансформироваться в своем собственном 3D -пространстве.

Пример №13. Пример использования css-свойства transform-style

Итак, в примере выше у нас имеется обычный общий ‘div’ (темно-серый фон), в котором расположены два других ‘div’ , которые подвергаются идентичной трансформации поворота вокруг оси X (запустите пример в браузере и визуально убедитесь в этом). Оба этих блока имеют еще и по одному дочернему абзацу, которые мы также пытаемся подвергнуть дополнительной 3D -трансформации поворота вокруг оси X (она лежит в плоскости родительского для текущего абзаца элемента). Однако, если в нижнем блоке мы видим, что абзац дополнительно повернулся (как мы и ожидали), то в верхнем блоке мы поворота не увидели. Вместо этого мы увидели какую-то 2D -трансформацию, получившуюся в результате проецирования точек третьего измерения на плоскость родительского элемента. Это связано с тем, что в нижнем блоке мы активировали для абзаца собственное 3D -пространство при помощи класса three_d .

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

css-свойство backface-visibility

Когда в результате трансформации элемента (например, поворота вокруг оси X ) он поворачивается к нам обратной стороной, его обратная сторона по умолчанию остается видимой пользователю и отображается зеркально (см. пример №14). Однако такое поведение можно легко изменить при помощи ненаследуемого css -свойства backface-visibility, которое определяет, будет показываться обратная сторона элемента или нет. В качестве значений свойство принимает два ключевых слова:

  • visible – обратная сторона элемента видна и отображается зеркально сквозь переднюю сторону элемента (используется по умолчанию);
  • hidden – обратная сторона элемента не видна (скрывается за передней поверхностью элемента).

Пример №14. Пример использования css-свойства backface-visibility

В примере выше второй элемент не отображается, т.к. он больше не просвечивается. Это может быть полезно, когда нужно создать для пользователя впечатление того, что у элемента имеется более одной стороны. Например, чтобы создать игральную карту, можно взять два одинаковых по размеру фоновых изображения, применить к ним соответствующую трансформацию поворота и установить для backface-visibility значение visible . При повороте на угол более, чем девяноста градусов, одно изображение станет невидимым, а второе наоборот. Этот и другие примеры использования трансформаций в анимации можно посмотреть на соответствующей странице нашего учебного сайта №1.

Пару слов о 3D-функциях трансформации

В конце хотелось бы сказать пару слов о перечисленных вначале страницы 3D -функциях translate3d() , scale3d() , rotate3d() и matrix3d() . Их использование предусматривает некоторое знание математики и матриц, что подходит далеко не каждому верстальщику. Поэтому в большинстве случаев о них можно смело забыть и в случаях, когда требуется трансформация элемента вдоль оси Z , пользоваться более простыми функциями translateZ() , scaleZ() и rotateZ() . Тоже самое касается трехмерных трансформаций и вдоль других осей.

Далее, следует обратить внимание на то, что в списке отсутствуют функции skewZ() и skew3d() . Это связано с тем, что skew — единственная трансформация, которую допускается осуществлять только на плоскости (деформация сдвига вдоль оси Z не разрешается).

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

Понравилась статья? Поделиться с друзьями:
Кодинг, CSS и SQL