Cвойство transform-origin задаёт положение точки, относительно которой применяются трансформации. Некоторые трансформации выполняются относительно какой-то точки. Возьмём для примера поворот. По умолчанию он происходит относительно центра элемента. То есть в центре элемента есть некая неподвижная точка, вокруг которой происходит поворот. Но что, если мы хотим повернуть элемент не относительно центра, а относительно угла? То есть при повороте угловая точка элемента должна остаться неподвижной, а остальной элемент будет поворачиваться вокруг неё. В этом случае нам поможет свойство transform-origin. Оно задаёт координаты точки, относительно которой будет выполняться трансформация. В примере ниже мы задали для второго элемента координаты (0, 0). Это значит, что поворот выполнится вокруг левого верхнего угла элемента.
transform-origin հատկությունը սահմանում է այն կետի դիրքը, որի նկատմամբ կիրառվում են փոխակերպումները: Որոշ փոխակերպումներ կատարվում են որոշակի կետի համեմատ: Որպես օրինակ վերցնենք պտտումը։ Որպես սկզբնական արժեք, այն տեղի է ունենում տարրի կենտրոնի համեմատ: Այսինքն՝ տարրի կենտրոնում կա որոշակի ֆիքսված կետ, որի շուրջ տեղի է ունենում պտույտ։ Բայց ի՞նչ, եթե ուզում ենք տարրը պտտել ոչ թե կենտրոնի, այլ անկյունի համեմատ: Այսինքն՝ պտտվելիս տարրի անկյունային կետը պետք է անշարժ մնա, իսկ մնացած տարրը պտտվի դրա շուրջը։ Այս դեպքում մեզ կօգնի transform-origin հատկությունը։ Այս հատկությունը սահմանում է այն կետի կոորդինատները, որի նկատմամբ կկատարվի փոխակերպումը: Ստորև բերված օրինակում մենք երկրորդ տարրի կոորդինատները սահմանում ենք (0, 0): Դա նշանակում է, որ պտույտը կլինի տարրի վերին ձախ անկյունի շուրջ:
Синтаксис
Գրելաձև
transform-origin: center; ⟿ Положение точки будет в центре.
transform-origin: right top; ⟿ Положение точки будет справа сверху.
transform-origin: bottom right; ⟿ Положение точки будет снизу справа.
transform-origin: center; ⟿ Կետի դիրքը կլինի կենտրոնում.
transform-origin: right top; ⟿ Կետի դիրքը կլինի վերևի աջ կողմում.
transform-origin: bottom right; ⟿ Կետի դիրքը կլինի ներքևի աջ կողմում.
Пример
Օրինակ
⇓Результат данного примера показан на рисунке⇓
⇓Այս օրինակի արդյունքը ցույց է տրված նկարում⇓
| Browser | IE | Edge | Chrome | Firefox | Safari | Opera |
|---|---|---|---|---|---|---|
| Version | 10+ | 12+ | 36+ | 16+ | 9+ | 23+ |
| Notes |