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

переводить

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

Ниже приводится цитируемое содержание: #nav{ /* Это переместит элемент навигации на 10 пикселей влево и на 20 пикселей вниз */ -moz-transform: Translate(10px, 20px); -webkit-transform: Translate(10px, 20px); }

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

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

Перекос

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

Ниже приводится цитируемое содержание: #nav{ /* Это переместит элемент навигации на 10 пикселей влево и на 20 пикселей вниз */ -moz-transform: перекос (30 градусов, -10 градусов); -webkit-transform: перекос (30 градусов, -10 градусов); }

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

Атрибут 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, но принцип преобразования матриц универсален. .

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

Ниже приводится цитируемое содержание: #nav{ /* Элемент навигации будет наклонен, как верхний правый угол*/ -moz-transform: матрица (1, -0,2, 0, 1, 0, 0); -webkit-transform: матрица (1, -0,2, 0, 1, 0, 0); }

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

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

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

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

Ниже приводится цитируемое содержание: #nav{ -moz-transform: транслировать(10, 25); -webkit-transform: Translate(10, 25); -moz-transform: поворот (90 градусов); -webkit-transform: поворот (90 градусов); -moz-transform: масштаб (2, 1); -webkit-transform: масштаб (2, 1); }

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

Ниже приводится цитируемое содержание: навигация { -moz-transform: транслировать (10, 25) вращать (90 градусов) масштабировать (2, 1); -webkit-transform: Translate(10, 25) Rotate(90deg) Scale(2, 1); }

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

преобразование-происхождение

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

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

Ниже приводится цитируемое содержание: .class1{-moz-transform-origin: 0 0; -webkit-transform-origin: 0 0; ... } .class2{-moz-transform-origin:100% 100%; -webkit-transform-origin:100% 100%; ...} .class3{-moz-transform-origin:вверху слева; -webkit-transform-origin: вверху слева; ...}

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

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