transform

transform¶

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

Демо¶

Синтаксис¶

 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52

/* Keyword values */ transform: none; /* Function values */ transform: matrix(1, 2, 3, 4, 5, 6); transform: translate(12px, 50%); transform: translateX(2em); transform: translateY(3in); transform: scale(2, 0.5); transform: scaleX(2); transform: scaleY(0.5); transform: rotate(0.5turn); transform: skew(30deg, 20deg); transform: skewX(30deg); transform: skewY(1.07rad); transform: matrix3d( 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16 ); transform: translate3d(12px, 50%, 3em); transform: translateZ(2px); transform: scale3d(2.5, 1.2, 0.3); transform: scaleZ(0.3); transform: rotate3d(1, 2, 3, 10deg); transform: rotateX(10deg); transform: rotateY(10deg); transform: rotateZ(10deg); transform: perspective(17px); /* Multiple function values */ transform: translateX(10px) rotate(10deg) translateY(5px); /* Global values */ transform: inherit; transform: initial; transform: revert; transform: revert-layer; transform: unset; 

Значения¶

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

matrix() Задаёт двумерную матрицу преобразований. matrix3d() Задаёт трёхмерную матрицу преобразований. rotate() Поворачивает элемент в двумерном пространстве на заданный угол относительно точки трансформации, задаваемой свойством transform-origin . rotate3d() Поворачивает элемент в трёхмерном пространстве. rotateX() Поворачивает элемент на заданный угол относительно оси X. rotateY() Поворачивает элемент на заданный угол относительно оси Y. rotateZ() Поворачивает элемента на заданный угол относительно оси Z. scale() Масштабирует элемент по горизонтали и вертикали. Значение больше 1 увеличивает масштаб элемента, меньше 1 — уменьшает масштаб. scale3d() Масштабирует элемент в трёхмерном пространстве. scaleX() Масштабирует элемент по горизонтали. scaleY() Масштабирует элемент по вертикали. scaleZ() Масштабирует элемент по оси Z. skewX() Наклоняет элемент на заданный угол по вертикали. skewY() Наклоняет элемент на заданный угол по горизонтали. translate() Сдвигает элемент на заданное значение по горизонтали и вертикали. translate3d() Сдвигает элемент на заданное значение в трёхмерном пространстве. translateX() Сдвигает элемент по горизонтали на указанное значение. Положительное значение сдвигает вправо, отрицательное влево. translateY() Сдвигает элемент по вертикали на указанное значение. Положительное значение сдвигает вниз, отрицательное вверх. translateZ() Сдвигает элемент по оси Z на указанное значение. Положительное значение сдвигает назад, отрицательное вперёд. perspective() Задаёт перспективу.

Примечание¶

• Internet Explorer 9 поддерживает свойство -ms-transform .
• Chrome до версии 36 и Android до версии 4 поддерживают свойство -webkit-transform .
• Safari поддерживает свойство -webkit-transform .
• Opera до версии 12.10 и с версии 15 до 23 поддерживает свойство -o-transform .
• Firefox до версии 16 поддерживает свойство -moz-transform .

Значение по-умолчанию: none

Применяется к трансформируемым элементам

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

Источник

transform

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

Интерактивный пример

Если свойство имеет значение, отличное от none , будет создан контекст наложения. В этом случае, элемент будет действовать как содержащий блок для любых элементов position: fixed; или position: absolute; которые он содержит.

Предупреждение: Только трансформируемый элемент может быть transform . Т.е. все элементы, шаблоны которых регулируются блочной моделью CSS, кроме : неизменяемые инлайновые блоки, блоки таблица-колонка, и блоки таблица-колонка-группа (en-US) .

Синтаксис

/* Значения ключевым словом*/ transform: none; /* Значения функций */ transform: matrix(1.0, 2.0, 3.0, 4.0, 5.0, 6.0); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: perspective(17px); transform: rotate(0.5turn); transform: rotate3d(1, 2.0, 3.0, 10deg); transform: rotateX(10deg); transform: rotateY(10deg); transform: rotateZ(10deg); transform: translate(12px, 50%); transform: translate3d(12px, 50%, 3em); transform: translateX(2em); transform: translateY(3in); transform: translateZ(2px); transform: scale(2, 0.5); transform: scale3d(2.5, 1.2, 0.3); transform: scaleX(2); transform: scaleY(0.5); transform: scaleZ(0.3); transform: skew(30deg, 20deg); transform: skewX(30deg); transform: skewY(1.07rad); /* Мультифункциональные значения */ transform: translateX(10px) rotate(10deg) translateY(5px); transform: perspective(500px) translate(10px, 0, 20px) rotateY(3deg); /* Глобальные значения */ transform: inherit; transform: initial; transform: unset; 

Свойство transform может быть указано как значение ключевого слова none или как одно или более значений .

Значения

Одна или более применяемых функций CSS-трансформации. Функции трансформации умножаются в порядке слева направо, что означает, что составное трансформирование эффективнее применять в порядке справа налево.

Указывает, что трансформация не должна применяться.

Формальный синтаксис

Если perspective() (en-US) является одним из мультифункциональных значений, оно должно быть указано первым.

Источник

Добавление масштабирования страницы при ширине экрана меньше чем body min-width в браузерах Firefox и Safari

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

Вот и я, в ходе работы над своим сайтом портфолио, тестировал его в разных браузерах и наткнулся на проблему.

Проблема

При указании свойства min-width: 320px для тега body в Firefox, контент, при достижении минимальной ширины, не начинает пропорционально уменьшаться как в Chrome (рис. 1), а просто выходит за экран. (рис. 2)

Зачем решать эту проблему?

Допустим, у меня сломался основной смартфон, а в запасе только Samsung Galaxy Mini с шириной экрана в 240px и с браузером Firefox. На таких устройствах, треть контента сайта будет выходить за viewport, что приведет к появлению горизонтального скролла, а это не удобно.

Также поддержка ширины в менее чем 320px, может быть полезна для браузеров в которых есть функция боковых веб-панелей (например Vivaldi).

Поддержка min-width для body в других браузерах

В ходе тестирования в других браузерах, оказалось, что Safari (проверялось на Safari 15) также имеет данную проблему. (рис. 3)

В остальном, свойство min-width для body без проблем работает на всех браузерах с движком Chromium. По крайней мере, кроме Chrome, все работает как положено в последних версиях Edge (105), Vivaldi (5.4), Opera (90.0.4480) и Yandex (102).

Решение

Сначала, я попробовал решить данную проблему путем добавления свойства min-width, не только к тегу body, но и к тегу html, а также обертке контента div , Увы, данный способ не сработал.

В связи с этим, я написал функцию, которая уменьшает контент при достижении определенной ширины экрана. Она сравнивает ширину контента страницы с доступной шириной окна (viewport), а затем уменьшает страницу так, чтобы эти значения оставались равны.

Способ 1. Функция масштабирования через transform: scale()

Для масштабирования с изменением размера существует CSS свойство zoom, которое не только масштабирует элемент как свойство transform: scale(), но и пропорционально меняет его размеры, влияя на окружение. К сожалению, в Firefox свойство zoom не поддерживается (Can I Use Zoom). Именно поэтому для масштабирования страницы применяется связка свойств transform: scale() и width. В данном случае, если использовать только свойство transform: scale() и не влиять ширину, контент будет выглядеть хорошо, однако горизонтальный скролл останется. (рис. 4)

CSS свойства применяются к тегу html, так как на теге body установлено свойство min-width и свойство width не будет работать.

Ниже приведен пример работы готовой функции transform-function.js. (рис. 5)

Способ 2. Функция масштабирования через мета-тег viewport

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

Главным преимуществом данного способа является то, что, так как все изменения происходят с помощью внутренних сил браузера, итоговая реализация масштабирования является в разы более надежной по сравнению с использованием метода transform: scale + width.

Недостатком этого варианта заключается в том, что функция запускается один раз и при изменении размера окна появляется горизонтальный скролл (рис.7). Учитывая то, что в мобильном устройстве размер окна практически никогда не изменяется, этот вариант почти идеален. Так как в случае с изменением ориентации экрана, функция работает без ошибок.

Ниже приведен пример работы готовой функции meta-width-function.js (Ширина экрана не меняется, доступно изменение ориентации экрана) (рис. 7)

О том как использовать функции

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

В файле transform-function.js масштабирование происходит за счет изменения свойств body — transform: scale() и width. Преимуществом данного метода является то, что функция работает как и на ПК, так и на мобильных устройствах.

В файле meta-width-function.js масштабирование происходит за счет изменения мета-тега viewport, путем добавления к нему фиксированной ширины взятой из min-width. Преимуществом данного метода является то, что все изменения происходят силами браузера. Из-за этого функция работает надежнее и менее инвазивно. Недостаток такого способа заключается в том, что он работает только в мобильных браузерах.

Откройте выбранный вариант и скопируйте код к себе в проект, вызовите функцию adaptiveSizePageScaleInit(300) .

В качестве аргумента передайте в нее ширину окна браузера, при котором она должна запускаться, если аргумент не указан, функция возьмет значение ширины из min-width body. При передаче аргумента вручную, очень важно, чтобы ширина body min-width была равна значению переданному в функцию.

Если необходимо, чтобы функция запускалась только в определенных браузерах, уберите вызов функции adaptiveSizePageScaleInit() , после чего скопируйте функцию вызова кода в определённых браузерах startOnSpecificBrowserInit() .

В функции startOnSpecificBrowserInit() выберете браузеры, в которых функция должна работать, путем замены строки «НЕОБХОДИМЫЙБРАУЗЕР» из условия кросс-браузерный функции на нужный вариант из списка: «other», «msEdge», «chrEdge», «opera«, «сhrome», «ie», «firefox», «safari».

Условие, в котором нужно менять строку:
if (browser == «НЕОБХОДИМЫЙБРАУЗЕР»)

Заключение

Я надеюсь, что эта статья была вам полезна!

Если у вас есть какие вопросы, советы или предложения по решению данной проблемы, пишите, я буду рад обратной связи.

Ну а на этом все, надежного вам адаптива и хорошего дня!)

Источник

transform

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

Синтаксис

Значения

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

matrix

rotate

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

scale

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

Значение больше 1 увеличивает масштаб элемента, меньше 1 — уменьшает масштаб.

scaleX

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

scaleY

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

skewX

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

skewY

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

translate

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

translateX

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

translateY

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

HTML5 CSS3 IE Cr Op Sa Fx

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

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

[window.]document.getElementById(» elementID «).style.transform

Браузеры

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

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

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

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

Источник