Чтобы ваше CSS-свойство работало безупречно во всех популярных браузерах, важно не забыть о вендорных префиксах. Вот актуальный список альтернативных свойств для каждой среды: - Internet Explorer - "-ms-transform" (поддерживает исключительно 2D-преобразования)
- Firefox - "-moz-transform" (только для 2D-преобразований)
- Opera - "-o-transform" (ограничено 2D-преобразованиями)
- Safari и Chrome - "-webkit-transform" (полная поддержка как 2D, так и 3D преобразований)
Свойство transform открывает перед разработчиками невероятные возможности по визуальной манипуляции элементами. Оно позволяет эффектно вращать объекты, менять их масштаб или придавать наклон, создавая динамичный и живой интерфейс. | Значение по умолчанию: | none | | Наследуется: | нет | | Версия: | CSS3 | | Синтаксис JavaScript: | object.style.transform="rotate(7deg)" | | Значение | Описание | | none | Любые преобразования отсутствуют. | | matrix(n,n,n,n,n,n) | Выполняет 2D-преобразование на основе матрицы, состоящей из шести числовых значений. | | matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n) | Реализует сложное 3D-преобразование с использованием матрицы 4х4 (шестнадцать значений). | | translate(x,y) | Перемещает элемент в двумерном пространстве. | | translate3d(x,y,z) | Смещает объект в трехмерной системе координат. | | translateX(x) | Двигает элемент строго вдоль горизонтальной оси X. | | translateY(y) | Смещает объект только по вертикальной оси Y. | | translateZ(z) | Перемещает элемент в глубину, вдоль оси Z. | | scale(x,y) | Масштабирует объект в 2D-пространстве. | | scale3d(x,y,z) | Изменяет размер элемента во всех трех измерениях. | | scaleX(x) | Масштабирует объект исключительно по горизонтали (ось X). | | scaleY(y) | Увеличивает или уменьшает высоту элемента (ось Y). | | scaleZ(z) | Меняет масштаб в перспективе, вдоль оси Z. | | rotate(angle) | Вращает элемент вокруг центра; угол задаётся в параметре функции. | | rotate3d(x,y,z,angle) | Выполняет сложное вращение в 3D-пространстве по заданной оси и углу. | | rotateX(angle) | Поворачивает элемент вокруг горизонтальной оси X (эффект «вверх/вниз»). | | rotateY(angle) | Вращает объект вокруг вертикальной оси Y (эффект «влево/вправо»). | | rotateZ(angle) | Стандартное плоскостное вращение вокруг оси Z. | | skew(x-angle,y-angle) | Придает элементу наклон одновременно по осям X и Y, создавая эффект искажения. | | skewX(angle) | Наклоняет объект только вдоль горизонтальной оси X. | | skewY(angle) | Смещает элемент под углом исключительно по вертикальной оси Y. | | perspective(n) | Задаёт глубину перспективы, определяя, насколько реалистично будет выглядеть 3D-преобразование. | Пример
|