Свойство -moz-transform свойство -webkit-transform


Оглавление (нажмите, чтобы открыть):

Свойство transform-origin

Свойство transform-origin задает точку, относительно которой будут происходить трансформации элемента, задаваемые свойством transform.

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

Синтаксис

Значения по осям Y и Z не являются обязательными, можно их опускать (они примут значения по умолчанию). Сдвиг точки по оси Z нужен для 3D трансформаций.

Значения для оси X

Значение Описание
CSS единицы Значением служат любые единицы для размеров, которые задают отступ центра трансформации от левой границы элемента. Положительное значение сдвигает центр трансформации вправо (вовнутрь элемента), а отрицательное — влево (наружу от элемента) относительно левой границы элемента.
left Точка вращения по горизонтали на левой границе элемента.
right Точка вращения по горизонтали на правой границе элемента.
center Точка вращения по горизонтали в центре элемента.

Значение по умолчанию: center.

Значения для оси Y

Значение Описание
CSS единицы Значением служат любые единицы для размеров, которые задают отступ центра трансформации от верхней границы элемента. Положительное значение сдвигает центр трансформации вниз (вовнутрь элемента), а отрицательное — вверх (снаружу элемента) относительно верхней границы элемента.
top Точка вращения по вертикали на верхней границе элемента.
bottom Точка вращения по вертикали на нижней границе элемента.
center Точка вращения по вертикали в центре элемента.

Значение по умолчанию: center.

Значения по оси Z

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

Значение по умолчанию: 0px.

Пример

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

Свойства transform и transition

Сразу после создания элементы HTML подобны неподъемным и прочно закрепленным блокам. Конечно, их можно перемещать с помощью кода JavaScript или возможностей из некоторых популярных библиотек, таких как jQuery (https://www.jquery.com), однако до появления свойств transform и transition в CSS3 стандартной процедуры для этого не существовало.

Теперь не приходится задумываться, как это делать. Нужно всего лишь выучить несколько параметров, и вы сможете создавать потрясающе динамические веб-сайты, о которых раньше могли только мечтать. Свойство transform умеет выполнять четыре базовых трансформации объекта: масштабировать (функция scale), вращать (функция rotate), наклонять (функция skew) и перемещать или транслировать (функция translate). Давайте посмотрим, как это работает.

Листинг 3.19. Масштабирование поля заголовка

Display: block; width: 500px; margin: 50px auto; padding: 15px; text-align: center; border: 1px solid #999999; background: #DDDDDD;

В примере из листинга 3.19 мы взяли базовые стили, которые ранее создали для поля заголовка в листинге 3.2, и трансформировали их, увеличив размер элемента в два раза. Функция scale принимает два параметра: значение X для горизонтального масштабирования и значение Y — для вертикального. Если указано только одно значение, оно используется для обоих параметров.

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

Листинг 3.20. Создание зеркального отображения с помощью функции scale

Display: block; width: 500px; margin: 50px auto; padding: 15px; text-align: center; border: 1px solid #999999; background: #DDDDDD;

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

Существует еще две функции, аналогичные scale, но работающие только в одном измерении — либо по горизонтали, либо по вертикали. Эти функции, scaleX и scaleY, разумеется, принимают только один параметр.

Замените кодом из листингов 3.19 и 3.20 соответствующий код в листинге 3.11 и проверьте результат в своем браузере.

Справочник по CSS : Тематический указатель : Расширения CSS для Firefox (Gecko) : Свойства : -moz-transform

смотрим также

Материал из Справочник Web-языков

Содержание

Свойство -moz-transform

Используется для поворота, наклона или масштабирования элементов.

Синтаксис

Используемые значения

transform-function Один из методов трансформации, применяемый в CSS (описаны в разделе Замечания) none Трансформация к элементу не применяется.


Значением по умолчанию является none. Атрибут Каскадных таблиц стилей (CSS) не наследуется.

Замечания

Свойство -moz-transform применяется ко всем блочным и встроенным элементам.

Для задания значений свойству -moz-transform используются следующие виды трансформации:

  • matrix — задает 2D матрицу трансформации.

-moz-transform:matrix(a, c, b, d, tx, ty). a, c, b, d — это коэффициенты для построения матрицы вида tx, ty — коэффициенты преобразования.

  • rotate — поворачивает элемент по часовой стрелке на заданный угол поворота.

-moz-transform:rotate(angle); /* — это значение угла, например, rotate(30deg) */ Значение rotate — это тоже самое, что матрица [cos(angle) sin(angle) -sin(angle) cos(angle) 0 0]

  • scale — 2D операция масштабирования.

-moz-transform:scale(sx[, sy]); /* одно или два значения , например, scale(2.1,4) */ Если sy специально не задано, то по умолчанию оно будет равно sx

  • scaleX — операция масштабирования по вектору [sx, 1].

-moz-transform:scaleX(sx); /* значение , например, может быть равно scaleX(2.7) */

  • scaleY — операция масштабирования по вектору [1, sy].

-moz-transform:scaleY(sy); /* значение , например, может быть равно scaleY(0.3) */

  • skew — осуществляется наклон элемента по осям X и Y на заданные углы.
Мастер Йода рекомендует:  Создание текста из травы

-moz-transform:skew(ax[, ay]); /* одно или два значения , например skew(30deg,-10deg) */ Если ay специально не задано, то наклон по оси Y происходить не будет.

  • skewX— осуществляется наклон элемента по оси X на заданный угол.

-moz-transform:skewX(angle); /* значение , например, может быть skewX(-30deg) */

  • skewY— осуществляется наклон элемента по оси Y на заданный угол.

-moz-transform:skewY(angle); /* значение , например, может быть skewY(60deg) */

  • translate — осуществляется 2D преобразование (перемещение) элемента по вектору [tx, ty].

-moz-transform:translate(tx[, ty]) /* одно или два значения для длины */ Если ty специально не задано, то по умолчанию оно будет равно .

  • translateX — осуществляется преобразование (перемещение) элемента по оси X.

-moz-transform:translateX(tx) /* одно значение для длины */

  • translateY — осуществляется преобразование (перемещение) элемента по оси Y.

-moz-transform:translateY(ty) /* одно значение для длины */

Примеры

В примере показано как описать свойство -moz-transform для разных браузеров.

Поддерживаемые браузеры

Firefox (Gecko) начиная с версии 3.5 (1.9.1) — для свойства -moz-transform.

Opera начиная с версии 10.5 — для свойства -o-transform.

Safari (WebKit) начиная с версии 3.1 (525) — для свойства -webkit-transform.

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

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

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

Поведение элементов

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

Кроссбраузерность

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

  • -ms-transform — для Internet Explorer 9;
  • -webkit-transform — для Chrome 35 и ранее, Safari до версии 8 включительно, Opera с версии 15 до 22, Android 4.4.4 и ранее, iOS Safari до версии 8.4 включительно;
  • -o-transform — для браузера Opera 11.5;
  • -moz-transform — для Firefox до версии 15 включительно.

В следующих частях урока, посвященного свойству transform, мы познакомимся со значениями, которые оно принимает. И начнем мы с функции вращения rotate().

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

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

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 или как одно или более значений «> .

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

Трансформация объектов доступна в таких дизайнерских программах, как 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();

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

Примеры

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

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

Свойство 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.

transform

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

Краткая информация

Значение по умолчанию none
Наследуется Нет
Применяется К трансформируемым элементам
Анимируется Да

Синтаксис ?

Обозначения

Описание Пример
Указывает тип значения.
A && B Значения должны выводиться в указанном порядке. &&
A | B Указывает, что надо выбрать только одно значение из предложенных (A или B). normal | small-caps
A || B Каждое значение может использоваться самостоятельно или совместно с другими в произвольном порядке. width || count
[ ] Группирует значения. [ crop || cross ]
* Повторять ноль или больше раз. [, ]*
+ Повторять один или больше раз. +
? Указанный тип, слово или группа не является обязательным. inset?
Повторять не менее A, но не более B раз.
# Повторять один или больше раз через запятую. #

×

Значения

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

matrix

matrix3d

Задаёт трёхмерную матрицу преобразований.

rotate()

Поворачивает элемент в двумерном пространстве на заданный угол относительно точки трансформации, задаваемой свойством transform-origin.

rotateX()

Поворачивает элемент на заданный угол относительно оси X.

rotateY()


Поворачивает элемент на заданный угол относительно оси Y.

rotateZ()

Поворачивает элемент на заданный угол относительно оси Z.

rotate3d

Поворачивает элемент в трёхмерном пространстве.

scale()

Масштабирует элемент по горизонтали и вертикали.

scaleX()

Масштабирует элемент по горизонтали.

scaleY()

Масштабирует элемент по вертикали.

scaleZ()

Масштабирует элемент по оси Z.

scale3d

Масштабирует элемент в трёхмерном пространстве.

Наклоняет элемент на заданный угол по горизонтали и вертикали.

skewX()

Наклоняет элемент на заданный угол по горизонтали.

skewY()

Наклоняет элемент на заданный угол по вертикали.

translate()

Сдвигает элемент на заданное значение по горизонтали и вертикали.

translateX()

Сдвигает элемент по горизонтали на указанное значение. Положительное значение сдвигает вправо, отрицательное влево.

translateY()

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

translateZ()

Сдвигает элемент по оси Z на указанное значение. Положительное значение сдвигает вперёд, отрицательное назад.

translate3d

Сдвигает элемент на заданное значение в трёхмерном пространстве.

perspective()

Пример

В данном примере при наведении курсора на изображение оно поворачивается на 15 градусов по часовой стрелке.

Объектная модель

Примечание

Internet Explorer 9 поддерживает свойство -ms-transform .


Chrome до версии 36, Safari до версии 9, Opera до версии 23 и Andro >-webkit-transform .

Opera до версии 12.1 и с версии 15 до 23 поддерживает свойство -o-transform .

Firefox до версии 16 поддерживает свойство -moz-transform .

Спецификация ?

Спецификация Статус
CSS Transforms Module Level 1 Рабочий проект

Спецификация

Каждая спецификация проходит несколько стадий одобрения.

  • Recommendation ( Рекомендация ) — спецификация одобрена W3C и рекомендована как стандарт.
  • Cand >Возможная рекомендация ) — группа, отвечающая за стандарт, удовлетворена, как он соответствует своим целям, но требуется помощь сообщества разработчиков по реализации стандарта.
  • Proposed Recommendation ( Предлагаемая рекомендация ) — на этом этапе документ представлен на рассмотрение Консультативного совета W3C для окончательного утверждения.
  • Working Draft ( Рабочий проект ) — более зрелая версия черновика после обсуждения и внесения поправок для рассмотрения сообществом.
  • Editor’s draft ( Редакторский черновик ) — черновая версия стандарта после внесения правок редакторами проекта.
  • Draft ( Черновик спецификации ) — первая черновая версия стандарта.

×

Браузеры ?

9 10 12 5 36 11.5 12.1 15 23 4 9 3.5 16
2.1 3.5 16 12 4 9.2

Браузеры

В таблице браузеров применяются следующие обозначения.

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

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

Перемещения и трансформации в CSS3

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

Чтобы легче понять то, как устроено перемещение объекта, мы будем работать в системе координат.

Однако наша система координат имеет одну особенность: ось Y направлена в противоположную сторону, чем обычно. Почему? Дело в том, что HTML и CSS (наравне, например, с ActionScript) используют обратную систему координат, так как веб-страница начинается с левого верхнего угла и идет вниз.
Заметка: Мы будем полагать, что вы уже знакомы со структурой HTML и CSS. Я пропущу объяснения того, как настроить файл CSS, как разместить картинки и т.д. Мы сфокусируемся на анимировании изображений. Если вы не уверены в том, что ваши навыки на высоком уровне, то советуем взглянуть на курс уроков «HTML и CSS за 30 дней» (бесплатно и на английском языке), чтобы выучить все необходимое.

1: Горизонтальное перемещение

Первое перемещение, которое мы продемонстрируем — горизонтальное. Мы будем двигать объекты слева направо и справа налево.

Двигаемся вправо

Чтобы переместить объект мы будем использовать transform: translate(x,y), где X — положительное число, а Y=0.

HTML
Откройте ваш любимый редактор кода и введите следующее:

Мы определили три класса к картинке:

  • object: Установление главных правил нашего объекта.
  • van: Мы будем использовать различные объекты для демонстрации каждого вида анимации.
  • move-right: Используя этот класс, мы будем двигать наш объект.

CSS
Во-первых, мы разместим наш объект (картинку грузовика) по центру.

В этом примере мы подвинем объект на 350px вправо. Использован синтаксис transform: translate(350px,0);. Кроме того объект будет двигаться только при наведении на него курсора: #axis:hover .move-right.

Параметр transform всего лишь переместит объект из одной точки в другую, но не создаст анимацию данного перемещения. Чтобы исправить это, нужно добавить параметр перемещения в классе .object.

Это правило перемещение скажет браузеру анимировать все параметры объекта на 2 секунды (без задержки) с помощью функции ease-in-out.
Мы можем использовать 6 различных функций хронометража перемещений:

  • linear: перемещение происходит постоянной скоростью от начала и до конца.
  • ease: перемещение начинается медленно и затем набирает скорость.
  • ease-in: перемещение начинается медленно.
  • ease-out: перемещение заканчивается медленно.
  • ease-in-out: перемещение начинается и заканчивается медленно.
  • cubic-bezier: ручное определение значения перемещения.

Посмотреть ДЕМО

Двигаемся влево

Чтобы переместить объект влево, нужно просто поставить отрицательное значение к оси ОХ, в то время как Y остается неизменным. В нашем случае мы переместим объект на —350px влево.

HTML
Создайте новый документ html и вставьте следующий код:

На этот раз мы используем класс move-left, чтобы переметить объект влево.

CSS
Теперь введем -350px для оси OX. transform: translate(-350px,0); — переместим объект влево.


Так как ранее мы уже определяли правила перемещения, нам не нужно делать это снова.
Посмотреть ДЕМО

2: Вертикальное перемещение

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

Двигаемся вверх

HTML
Шаблон HTML идентичен предыдущим примерам. Однако, мы заменим наш объект ракетой (для наглядности) и назначим класс move-up.

CSS
Так же как и грузовик, мы разместим ракету по центру:

Как мы отметили ранее, координата Y должна быть отрицательной. В нашем случае мы подвинем объект на 350px вверх.

Двигаемся вниз

Как вы догадались, чтобы переместить объект вниз, координата Y должна быть положительной, а X равняться 0. Синтаксис: translate(0,y);

HTML

CSS

3: Диагональное перемещение

Чтобы переместить объект по диагонали, мы совместим параметры x и y. Синтаксис будет следующим: transform: translate(x,y). В зависимости от направления, значение x и y может быть как положительным, так и отрицательным.

HTML

CSS

4: Вращение

Вращение в CSS3 регулируется градусными координатами (от 0° до 360°). Чтобы повернуть объект, примените следущие параметры: transform: rotate(ndeg); где n — градусы.

Вращение по часовой стрелке

Для того чтобы повернуть объект по часовой стрелке, применим положительное значение для rotate(ndeg).

HTML

CSS

Вращение против часовой стрелки

Для того чтобы повернуть объект против часовой стрелки, применим отрицательное значение для rotate(ndeg).

HTML

CSS

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

Масштабирование — это интересная особенность CSS3. Используя параметр scale(n) или параметр scale(x,y), мы можем либо увеличивать, либо уменьшать объект непосредственно в рамках HTML. Объект будет менять размер в зависимости от значения n/x,y, где ось X — ширина, а Y — высота.
Давайте посмотрим на следующий пример.

HTML

CSS

6: Множественные движения

После того как мы рассмотрели основные движения и трансформации, мы можем попробовать комбинировать их.

HTML

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

CSS стиль transform. Правила трансформации объектов.

Internet Explorer 9 поддерживает свойство -ms-transform.

Safari, Chrome до версии 36 и Android до версии 4 поддерживают свойство -webkit-transform.

Opera с версии 15 до 23 поддерживает свойство -o-transform.

Firefox до версии 16 поддерживает свойство -moz-transform.

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

Краткая информация по CSS-свойству transform

Значение по умолчанию none
Наследуется Нет
Применяется К трансформируемым элементам

Правила написания свойства transform

Здесь — функция трансформации. Значение none отменяет трансформацию.

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

Поворот элемента на заданный угол относительно точки трансформации, задаваемой свойством transform-origin.

Масштаб элемента по горизонтали и вертикали. Значение 1 — уменьшает.

Масштабирует элемент по горизонтали.

Масштабирует элемент по вертикали.

Наклоняет элемент на заданный угол по вертикали.

Наклоняет элемент на заданный угол по горизонтали.

Сдвигает элемент на заданное значение по горизонтали и вертикали.

Сдвигает элемент по горизонтали на указанное значение. Положительное значение сдвигает вправо, отрицательное влево.

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

Добавить комментарий