Технология анимации CSS3, которую вам нужно знать (2)

переводить

Название «перевести» немного вводит в заблуждение. На самом деле это метод позиционирования элементов с использованием значений координат X и Y.

Поддержка браузера

Атрибут перевода в настоящее время поддерживается только Firefox, Safari и Chrome и должен использовать частные префиксы браузера -moz- и -webkit-.

Перекос

Skew также является полезной функцией преобразования, которая может наклонять объект под определенным углом вокруг осей X и Y. Это отличается от вращения Rotate, которое только вращается, не меняя форму элемента. Наклон изменяет форму элемента. Skew имеет два параметра, представляющие наклон осей x и y соответственно.

Поддержка браузера

Атрибут Skew в настоящее время поддерживается только Firefox, Safari и Chrome и использует частные префиксы браузера -moz- и -webkit-.

Матрица

Да, Матрица — это матрица. Матрица — это очень простая вещь в продвинутой математике, и это действительно очень продвинутая функция в CSS 3. CSS 3 представляет матричную функцию, которая может очень гибко реализовывать вышеупомянутые различные эффекты. Он имеет 6 параметров (a, b, c, d, e, f), которые на самом деле представляют собой матрицу 3*3, с помощью которой старые параметры преобразуются в новые значения:

| Абэ |

компакт-диск |

| 0 0 1 |

Если вы заинтересованы в более глубоком изучении, вы можете посмотреть здесь http://www.w3.org/TR/SVG/coords.html#TransformMatrixDefined . Это документ для SVG, но принцип преобразования матриц универсален. .

Давайте посмотрим на пример:

Поддержка браузера

Хорошей новостью является то, что IE поддерживает матричные фильтры. Хотя он не поддерживает большинство функций преобразования CSS3, вы можете добиться того же эффекта, используя этот фильтр. Однако сначала вы должны понять матричные операции. И webkit, и Firefox (3.5+) поддерживают эту функцию.

деформация цепи

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

Эти преобразования можно объединить в цепочку, чтобы сделать ваш код более эффективным:

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

преобразование-начало

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

Transform-origin принимает два параметра, которые могут быть конкретными значениями, такими как проценты, em, px и т. д., или описательными параметрами, такими как левый, центральный, правый или верхний, средний, нижний и т. д. Несколько примеров:

Совместимость с браузером

Этот атрибут в настоящее время поддерживается только webkit и firefox и требует добавления собственного частного префикса.