transform-origin հատկությունը

transform-origin հատկությունը սահմանում է այն կետը, որի նկատմամբ կկատարվեն տարրի փոխակերպումները, որոնք սահմանվում են transform հատկությամբ: Լռելյայնորեն այս կետը տարրի կենտրոնն է, և, օրինակ, պտույտը կկատարվի նրա կենտրոնի նկատմամբ: Սակայն, այս վարքագիծը կարելի է փոխել և ստիպել տարրին պտտվել իր կողքի, անկյունի կամ նույնիսկ տարրից դուրս գտնվող կետի նկատմամբ:

Շարահյուսություն

cssընտրիչ {
  transform-origin: X-առանցք Y-առանցք Z-առանցք;
}

Y և Z առանցքների արժեքները պարտադիր չեն, կարելի է դրանք բաց թողնել (դրանք կընդունեն լռելյայն արժեքները): Z առանցքի երկայնքով կետի տեղաշարժը անհրաժեշտ է 3D փոխակերպումների համար:

Արժեքներ X առանցքի համար

Լռելյայն արժեքը: center.

Արժեքներ Y առանցքի համար

Լռելյայն արժեքը: center.

Արժեքներ Z առանցքի համար

Լռելյայն արժեքը: 0px.

Օրինակ

Այժմ transform-origin հատկության արժեքը սահմանված չէ, և բլոկը կպտտվի իր կենտրոնի նկատմամբ: Մկնիկը դրեք բլոկի վրա, որպեսզի տեսնեք էֆեկտը:

html<div id="elem">lorem ipsum</div>

css#elem {
  border: 1px solid black;
  width: 100px;
  height: 50px;
}
#elem:hover {
  transform-origin: center center;
  transform: rotate(30deg);
}

Результат:

Օրինակ

Իսկ այժմ մկնիկի դրվելու դեպքում բլոկը կպտտվի վերևի ձախ անկյան նկատմամբ:

html<div id="elem">lorem ipsum</div>

css#elem {
  border: 1px solid black;
  width: 100px;
  height: 50px;
}
#elem:hover {
  transform-origin: 0px 0px;
  transform: rotate(30deg);
}

Результат:

Օրինակ

Իսկ այժմ մկնիկի դրվելու դեպքում բլոկը կպտտվի ներքևի աջ անկյան նկատմամբ: Դրա համար պետք է փոխակերպման կետը տեղափոխել 100% աջ և 100% ներքև (կարելի էր նշել նաև px-ով, բայց տարրի չափերը փոխելու դեպքում փոխակերպման կետը կմնար տեղում, ուստի ավելի լավ է %-ով):

html<div id="elem">lorem ipsum</div>

css#elem {
  border: 1px solid black;
  width: 100px;
  height: 50px;
}
#elem:hover {
  transform-origin: 100% 100%;
  transform: rotate(30deg);
}

Результат:

Օրինակ

Պտտենք բլոկը աջ վերևի անկյան նկատմամբ:

html<div id="elem">lorem ipsum</div>

css#elem {
  border: 1px solid black;
  width: 100px;
  height: 50px;
}
#elem:hover {
  transform-origin: 100% 0%;
  transform: rotate(30deg);
}

Результат:

Օրինակ

Պտտենք բլոկը ձախ կողմի կենտրոնի նկատմամբ: Դրա համար X առանցքի համար սահմանենք left (պտտման կետը կլինի ձախ կողմում), իսկ Y առանցքի համար՝ center (պտտման կետը կլինի ուղղահայաց կենտրոնում):

html<div id="elem">lorem ipsum</div>

css#elem {
  border: 1px solid black;
  width: 100px;
  height: 50px;
}
#elem:hover {
  transform-origin: left center;
  transform: rotate(30deg);
}

Результат:

Օրինակ

Հատկությունը կարելի է սահմանել ոչ միայն պտույտի, այլ նաև այլ փոխակերպումների համար: Եկեք մեծացնենք մասշտաբը օգտագործելով scale, նշելով փոխակերպման կետը որպես ձախ ներքևի անկյուն:

html<div id="elem">lorem ipsum</div>

css#elem {
  border: 1px solid black;
  width: 100px;
  height: 50px;
}
#elem:hover {
  transform-origin: left bottom;
  transform: scale(1.5);
}

Результат:

Օրինակ

Իսկ այժմ նշենք փոխակերպման կետը որպես աջ վերևի անկյուն:

html<div id="elem">lorem ipsum</div>

css#elem {
  border: 1px solid black;
  width: 100px;
  height: 50px;
}
#elem:hover {
  transform-origin: right top;
  transform: scale(1.5);
}

Результат:

Օրինակ

Փոխակերպման կետը կարելի է սահմանել նաև տարրից դուրս: Հաջորդ օրինակում մկնիկը կարմիր բլոկի վրա դնելու դեպքում սև բլոկը կկատարի պտույտ այն կետի նկատմամբ, որը գտնվում է դրսում:

html<div id="hover"></div>
<div id="elem"></div>

css#hover {
  border: 1px solid red;
  width: 50px;
  height: 50px;
}
#elem {
  border: 1px solid black;
  width: 100px;
  height: 50px;
  transition: transform 1s;
  transform-origin: -100px -100px;
}
#hover:hover + #elem {
  transform: rotate(30deg);
}

Результат: