Как использовать CSS Webkit Transform Scale
Свойство преобразования CSS
Вы можете использовать свойство преобразования CSS для визуального изменения элемента путем наклона , поворота, перемещения или масштабирования.
Атрибут преобразования преобразует элемент в двухмерном или трехмерном пространстве.
Даже если указаны высота и ширина, этот элемент теперь будет увеличен в двадцать раз по сравнению с исходным размером.
Если вы предоставите этой функции два значения, первое расширит ее по горизонтали, а второе — по вертикали. В следующем примере элемент будет в два раза шире, но вдвое меньше исходного.
Значения преобразования CSS
- Масштаб преобразования CSS()
Эта функция влияет на размер элемента. Это также относится к размеру шрифта, отступам, высоте и ширине элемента. Он также служит ярлыком для операций масштабированияX и масштабированияY.
- SkewX() и SkewY()
Эта функция Наклоняет элемент влево или вправо, аналогично преобразованию прямоугольника в параллелограмм.
Функции преобразования skew X и skew Y наклоняют элемент в ту или иную сторону. Кроме того, нет сокращенного свойства для наклона элемента, поэтому вам нужно использовать обе функции.
- Translate()
Эта функция преобразования перемещает элемент вбок или вверх и вниз. Важно отметить, что элемент, использующий преобразование, не заставит другие элементы обтекать его. Положительное значение поворачивает элемент по часовой стрелке от его начального положения, тогда как отрицательное значение поворачивает его в противоположном направлении.
- Матрица()
Функция, объединяющая все преобразования в одно и предположительно не предназначенная для ручного написания.
- Perspective()
Эта функция не влияет на сам элемент, но изменяет 3D-преобразования элементов-потомков, позволяя всем им иметь согласованную перспективу глубины.
См. также: Поворот HTML-элементов с помощью преобразования CSS
Масштаб преобразования CSS
Метод CSS transform scale () определяет преобразование, которое изменяет размер двумерного плоского элемента.
Он может изменять размеры по горизонтали и вертикали в разных масштабах, поскольку величина масштабирования определяется вектором. В результате получается тип данных
Двумерный вектор характеризует это изменение масштаба. Его координаты определяют степень масштабирования в каждом направлении. Если обе координаты одинаковы, масштабирование равномерное (изотропное) и соотношение сторон элемента сохраняется (это гомотетическое преобразование).
Когда значение координаты выходит за пределы диапазона [-1, 1], элемент расширяется по этому измерению; когда он внутри, он сжимается. Если значение отрицательное, результатом является точечное отражение в этом измерении. Значение 1 не имеет смысла.
Функция scale() масштабирует только в 2D. Для масштабирования в 3D используйте вместо этого scale3d().
Метод scale() принимает один или два аргумента, которые определяют степень масштабирования в каждом направлении. То есть Масштаб (sx) и Масштаб (sx, sy).
См. также: Управление регистром заглавных букв с помощью преобразования текста в CSS
Значения масштаба
- SX : <число> или <процент>, выражающее абсциссу вектора масштабирования.
- SY : <целое число> или <процент>, выражающее ординату вектора масштабирования. Если он не определен, значением по умолчанию является sx, что приводит к равномерному масштабированию с сохранением соотношения сторон элемента.
Анимации масштабирования/масштабирования проблематичны для доступности, поскольку они являются нетипичными триггерами мигрени. Если вы должны включить такие анимации на свой веб-сайт, дайте возможность посетителям отключить их, в идеале на всем сайте.
Рассмотрите возможность использования функции мультимедиа с уменьшенным движением для создания медиазапроса, отключающего анимацию, если у пользователя в параметрах системы задана уменьшенная анимация.
См. также: Создание анимации с помощью переходов и трансформаций CSS3
Несколько значений для преобразования CSS
Вы можете добавить несколько значений к свойству преобразования, используя список, разделенный пробелами.
Важно отметить, что эти преобразования выполняются в определенном порядке; в приведенном выше примере сначала выполняется «перекос», а затем масштабируемый элемент.
См. также: Адаптивные переходы CSS: советы и рекомендации
Матричное преобразование
Все преобразования можно комбинировать с помощью функции матричного преобразования. Это похоже на стенографию преобразования, но я не думаю, что ее нужно писать от руки. Доступны инструменты, которые могут превратить набор преобразований в одно объявление матрицы, например The Matrix Resolutions. В некоторых случаях это может уменьшить размер файла, но подобные микроулучшения, неудобные для автора, вряд ли будут стоить ваших усилий.
См. также: 5 продвинутых методов CSS, которые необходимо освоить в 2021 году
Префиксы для конкретных браузеров с переходом CSS при преобразовании
УВЕДОМЛЕНИЕ ОБ ОБНОВЛЕНИИ К сожалению, Safari на момент написания этого поста не соответствует изложенному стандарту в Спецификации W3 ниже, и включение как свойства с префиксом webkit, так и свойства без префикса после перехода приведет к тому, что оно сломается и вообще не будет анимировано.
Я все еще изучаю эту проблему в поисках хорошего общего решения, но похоже, что пока Safari не исправит это, может не быть решения, которое будет работать везде и для всех будущих свойств, без динамической настройки правил CSS для каждого браузера с помощью JavaScript.
Если вы добавите нераспознанное или недопустимое свойство в список свойств перехода, действительные свойства в списке все равно будут добавлены (за исключением Safari, см. примечание выше).
В соответствии с разделом 2.1 спецификации w3 для CSS-переходов:
Если один из перечисленных идентификаторов не является распознаваемым именем свойства или не является анимируемым свойством, реализация должна по-прежнему запускать переходы по анимируемым свойствам в списке, используя функцию длительности, задержки и времени по их соответствующим индексам в списках для «длительность перехода», «задержка перехода» и «функция времени перехода».
Спецификация W3 для CSS-переходов
Если вы выберете следующий стиль, свойство ширины все равно будет анимировано, несмотря на то, что ему предшествует недопустимое и нераспознанное свойство.
переход: нераспознанное свойство 2 с, ширина 2 с;
Если вы следуете правилу перехода с другим правилом перехода (с тем же префиксом или его отсутствием), первое правило будет перезаписано и больше не будет применяться, даже если второе правило содержит только недопустимые свойства, перечисленные справа .
Если вы попробуете следующий стиль, ширина не будет анимирована, потому что первое правило будет перезаписано вторым правилом, которое фактически ничего не делает, поскольку «unrecognizedProperty» не распознается.
переход: ширина 2s; переход: непризнанное свойство 2s;
Исходя из этого, я считаю, что ваш первый подход правильный.
-webkit-transition: -webkit-transform 300 мс;
переход: -webkit-преобразование 300 мс, преобразование 300 мс;
Первое правило будет применяться только в том случае, если -webkit-transition распознан, и в этом случае, поскольку преобразование появилось после перехода, оно обязательно должно иметь префикс, и мы можем опустить свойство преобразования без префикса (хотя я не думаю, что это было бы больно оставлять).
Ваш второй подход ошибочен, так как второе правило всегда будет перезаписано третьим правилом, независимо от того, распознаются ли какие-либо свойства в правой части.
Я полагаю, что полный список свойств с префиксом браузера, гарантирующий, что вы применяете переход 2s для преобразования во всех браузерах, которые способны, приведен ниже, но, пожалуйста, прочтите обоснование ниже, потому что это происходит только для этой пары свойств. шанс:
-webkit-transition: -webkit-transform 2s;
-moz-transition: -moz-transform 2s;
-о-переход: -о-преобразование 2s;
переход: трансформировать 2s;
Обратите внимание, что нет такой вещи, как -ms-transition, но есть -ms-transform. При этом переход не был добавлен в IE до 10, где -ms-transform также устарел из-за преобразования без префикса.
Следовательно, единственное правило для IE, которое нам нужно, это «переход: преобразование».
Я также отмечу, что каждый раз, когда у нас есть префикс браузера для перехода (< Chrome 26, < Firefox 16, < Safari 6.1, < Opera 12.1), преобразование также всегда было префиксом (< Chrome 36, < Firefox 16 , все Safari, < Opera 23), что означает, что мы можем отказаться от версии преобразования без префикса, следуя правилу префикса.
Поскольку Firefox выпустил переход без префикса одновременно с их преобразованием без префикса, нам не нужен префикс «-moz-transform» в правой части «перехода» без префикса.
Opera в какой-то момент использовала префикс -webkit- для преобразования в дополнение к -o-, однако они начали использовать -webkit-transform в версии 15, после того как начали использовать переход без префикса в версии 12.1, поэтому нам не нужно включать -webkit-преобразование после -o-перехода. Кроме того, поскольку Opera использовала только префиксы или -webkit-transform после версии 12.
