transform-origin հատկությունը
transform-origin հատկությունը սահմանում է այն կետը,
որի նկատմամբ կկատարվեն տարրի փոխակերպումները,
որոնք սահմանվում են transform հատկությամբ:
Լռելյայնորեն այս կետը տարրի կենտրոնն է,
և, օրինակ, պտույտը կկատարվի նրա կենտրոնի նկատմամբ:
Սակայն, այս վարքագիծը կարելի է փոխել
և ստիպել տարրին պտտվել իր կողքի,
անկյունի կամ նույնիսկ տարրից դուրս գտնվող
կետի նկատմամբ:
Շարահյուսություն
ընտրիչ {
transform-origin: X-առանցք Y-առանցք Z-առանցք;
}
Y և Z առանցքների արժեքները պարտադիր չեն, կարելի է դրանք բաց թողնել (դրանք կընդունեն լռելյայն արժեքները): Z առանցքի երկայնքով կետի տեղաշարժը անհրաժեշտ է 3D փոխակերպումների համար:
Արժեքներ X առանցքի համար
| Արժեք | Նկարագրություն |
|---|---|
| CSS միավորներ | Որպես արժեք ծառայում են ցանկացած չափերի միավորներ, որոնք սահմանում են փոխակերպման կենտրոնի հեռավորությունը տարրի ձախ եզրից: Դրական արժեքը փոխակերպման կենտրոնը տեղափոխում է աջ (տարրի ներս), իսկ բացասականը՝ ձախ (տարրից դուրս) ձախ եզրի նկատմամբ: |
left |
Պտտման կետը հորիզոնական ձախ եզրին: |
right |
Պտտման կետը հորիզոնական աջ եզրին: |
center |
Պտտման կետը հորիզոնական կենտրոնում: |
Լռելյայն արժեքը: center.
Արժեքներ Y առանցքի համար
| Արժեք | Նկարագրություն |
|---|---|
| CSS միավորներ | Որպես արժեք ծառայում են ցանկացած չափերի միավորներ, որոնք սահմանում են փոխակերպման կենտրոնի հեռավորությունը տարրի վերին եզրից: Դրական արժեքը փոխակերպման կենտրոնը տեղափոխում է ներքև (տարրի ներս), իսկ բացասականը՝ վերև (տարրից դուրս) վերին եզրի նկատմամբ: |
top |
Պտտման կետը ուղղահայաց վերին եզրին: |
bottom |
Պտտման կետը ուղղահայաց ներքևի եզրին: |
center |
Պտտման կետը ուղղահայաց կենտրոնում: |
Լռելյայն արժեքը: center.
Արժեքներ Z առանցքի համար
| Արժեք | Նկարագրություն |
|---|---|
| CSS միավորներ | Որպես արժեք ծառայում են ցանկացած չափերի միավորներ, որոնք սահմանում են փոխակերպման կենտրոնի հեռավորությունը տարրի հարթությունից: Դրական արժեքը այն տեղափոխում է դեպի մեզ (էկրանի հարթությունից), իսկ բացասականը՝ մեզնից հեռու: |
Լռելյայն արժեքը: 0px.
Օրինակ
Այժմ transform-origin հատկության արժեքը սահմանված չէ, և բլոկը կպտտվի իր կենտրոնի նկատմամբ: Մկնիկը դրեք բլոկի վրա, որպեսզի տեսնեք էֆեկտը:
<div id="elem">lorem ipsum</div>
#elem {
border: 1px solid black;
width: 100px;
height: 50px;
}
#elem:hover {
transform-origin: center center;
transform: rotate(30deg);
}
:
Օրինակ
Իսկ այժմ մկնիկի դրվելու դեպքում բլոկը կպտտվի վերևի ձախ անկյան նկատմամբ:
<div id="elem">lorem ipsum</div>
#elem {
border: 1px solid black;
width: 100px;
height: 50px;
}
#elem:hover {
transform-origin: 0px 0px;
transform: rotate(30deg);
}
:
Օրինակ
Իսկ այժմ մկնիկի դրվելու դեպքում բլոկը կպտտվի
ներքևի աջ անկյան նկատմամբ: Դրա համար պետք է
փոխակերպման կետը տեղափոխել 100% աջ
և 100% ներքև (կարելի էր նշել
նաև px-ով, բայց տարրի չափերը փոխելու դեպքում
փոխակերպման կետը կմնար տեղում,
ուստի ավելի լավ է %-ով):
<div id="elem">lorem ipsum</div>
#elem {
border: 1px solid black;
width: 100px;
height: 50px;
}
#elem:hover {
transform-origin: 100% 100%;
transform: rotate(30deg);
}
:
Օրինակ
Պտտենք բլոկը աջ վերևի անկյան նկատմամբ:
<div id="elem">lorem ipsum</div>
#elem {
border: 1px solid black;
width: 100px;
height: 50px;
}
#elem:hover {
transform-origin: 100% 0%;
transform: rotate(30deg);
}
:
Օրինակ
Պտտենք բլոկը ձախ կողմի կենտրոնի նկատմամբ:
Դրա համար X առանցքի համար սահմանենք left (պտտման կետը
կլինի ձախ կողմում), իսկ Y առանցքի համար՝ center
(պտտման կետը կլինի ուղղահայաց կենտրոնում):
<div id="elem">lorem ipsum</div>
#elem {
border: 1px solid black;
width: 100px;
height: 50px;
}
#elem:hover {
transform-origin: left center;
transform: rotate(30deg);
}
:
Օրինակ
Հատկությունը կարելի է սահմանել ոչ միայն պտույտի,
այլ նաև այլ փոխակերպումների համար: Եկեք մեծացնենք
մասշտաբը օգտագործելով scale, նշելով փոխակերպման
կետը որպես ձախ ներքևի անկյուն:
<div id="elem">lorem ipsum</div>
#elem {
border: 1px solid black;
width: 100px;
height: 50px;
}
#elem:hover {
transform-origin: left bottom;
transform: scale(1.5);
}
:
Օրինակ
Իսկ այժմ նշենք փոխակերպման կետը որպես աջ վերևի անկյուն:
<div id="elem">lorem ipsum</div>
#elem {
border: 1px solid black;
width: 100px;
height: 50px;
}
#elem:hover {
transform-origin: right top;
transform: scale(1.5);
}
:
Օրինակ
Փոխակերպման կետը կարելի է սահմանել նաև տարրից դուրս: Հաջորդ օրինակում մկնիկը կարմիր բլոկի վրա դնելու դեպքում սև բլոկը կկատարի պտույտ այն կետի նկատմամբ, որը գտնվում է դրսում:
<div id="hover"></div>
<div id="elem"></div>
#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);
}
:
