თვისება 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);
}
:
