loader

Cвойство transform используем, когда нам нужно применить к элементу какие-либо трансформации: искажение, поворот, смещение, масштабирование. Часто бывает необходимо каким-то образом трансформировать визуальное представление элемента (масштабировать, повернуть, переместить) и при этом никак не затронуть соседние элементы в документе. Для подобных преобразований используется свойство transform. В качестве значения выступают различные функции трансформации: rotate, translate, scale, skew.

transform հատկությունն օգտագործվում է այն դեպքում, երբ մենք պետք է որևէ տարրի վրա կիրառենք փոխակերպումներ՝ թեքել, պտտել, տեղաշարժել, մասշտաբավորել: Հաճախ անհրաժեշտ է լինում ինչ-որ կերպ փոխակերպել տարրի տեսողական պատկերը (մասշտաբավորել, պտտել, շարժել)՝ առանց փաստաթղթի հարևան տարրերի վրա ազդելու: Նման փոխակերպումների համար օգտագործվում է transform հատկությունը։ Փոխակերպման տարբեր գործառույթներ հանդիսանում են որպես արժեք՝ rotate, translate, scale, skew:

Синтаксис

Գրելաձև
transform: matrix(1.0, 2.0, 3.0);
transform: perspective(17px);
transform: rotate(0.5turn);
transform: translate(12px, 50%);
transform: scale(2, 0.5);
transform: skew(30deg, 20deg);

Пример

Օրինակ

See the Pen transform by Erik Egnatosyan (@SansaciaCodenyx) on CodePen.

See the Pen animation by Erik Egnatosyan (@SansaciaCodenyx) on CodePen.

See the Pen Css3 Transform by Vineeth.TR (@vineethtrv) on CodePen.

⇓Результат данного примера показан на рисунке⇓

⇓Այս օրինակի արդյունքը ցույց է տրված նկարում⇓

 wbr image

Также у тега transform есть следующие под. теги
Поддержка браузера дляԲրաուզերի աջակցությունը transform элемента տարրին
Browser IE Edge Chrome Firefox Safari Opera
Version 10+ 12+ 36+ 16+ 9+ 23+
Notes