transform

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 .

Источник

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) является одним из мультифункциональных значений, оно должно быть указано первым.

Источник

Трансформация элементов

Трансформация объектов доступна в таких дизайнерских программах, как Adobe Photoshop или Adobe Illustrator, причем существует в них в незапамятных времен. Как css-свойство transform появилось только в версии CSS3, и сразу же пришлось многим верстальщикам «по сердцу», особенно в паре со свойством transition, позволяющим назначать анимацию средствами css.

transform

CSS-свойство transform подразумевает использование одной или нескольких функций:

Масштабирование элемента — функция scale()

По умолчанию функция scale() имеет значение 1, т.е. transform: scale(1) — это нормальное состояние любого элемента. Поэтому при масштабировании объект обычно либо увеличивают scale(1.5) , либо уменьшают scale(.5) . Со значением -1 вы получите зеркальное отражение, причем по обеим осям.

Если масштабирование необходимо выполнить по одной из осей, можно использовать функцию scaleX(значение) или scaleY(значение):

Можно масштабировать элемент с разными пропорциями по оси X и Y сразу, указывая 2 значения через запятую в скобках:

Также часто применяют масштабирование элементов вместе с анимацией (так называемые hover-эффекты, или эффекты при наведении):

Как это выглядит на практике можно посмотреть в примере ниже:

Поворот rotate()

Для того чтобы повернуть элемент, необходимо использовать функцию rotate(угол). Угол можно указывать в нескольких единицах:

  • В градусах ( deg) . Наиболее часто используемая единица измерения. Полный круг равен 360deg.
  • В градах ( grad) . Полный круг равен 400grad,
  • В радианах ( rad) . Полный круг равен 2π или примерно 6.2832rad.
  • В поворотах ( turn) . Один круг равен одному повороту и пишется как 1turn. Отлично используется для анимации.

В коде использование этой функции будет выглядеть так:

Обратите внимание на последний пример: при повороте текст элемента поворачивается в ту же сторону, что и сам элемент. Если же текст нужно «вернуть на место», то для вложенного элемента нужно задать такой же угол поворота, но с отрицательным значением:

Скос элемента — функция skew()

В градусах (deg), градах (grad) или радианах (rad) также измеряется и скос, или искажение сторон, элемента. За это преобразование отвечает функция skew():

Как видно из кода, вы можете задать скос (или наклон) элемента либо одной цифрой (он будет выполнен по по оси X), либо двумя (первая — по оси X, вторая — по оси Y), или задать явно, по какой оси нужен скос, используя функции skewX или skewY.

Наглядная демонстрация использования трансформации скоса (наклона) в примере:

Смещение translate()

Очень удобное свойство, которое позволяет смещать элементы, которые не позиционированы абсолютно или относительно. В качестве аргументов можно указывать число в %, px, em, rem и т.п., причем как положительные, так и отрицательные. В случае использования % величина смещения берется от ширины или высоты элемента.

При использовании функции translate() с одним параметром смещение будет происходить по горизонтали (вправо — при положительных значениях, влево — при отрицательных значениях). Можно указать 2 параметра — тогда смещение будет и по горизонтали, и по вертикали одновременно. Для того чтобы сместить элемент по одной из осей, можно использовать функции translateX() или translateY() для горизонтального и вертикального смещения:

Источник

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 .

Источник

Читайте также:  Vs code запустить сервер php
Оцените статью