ფუნქცია rotate
ფუნქცია rotate() ახორციელებს ელემენტის როტაციას
მოცემული კუთხით. გამოიყენება თანამშრომლობით
თვისებასთან transform.
თვისების მნიშვნელობაა კუთხე ნებისმიერ კუთხის ერთეულში.
დადებითი მნიშვნელობა ატრიალებს საათის ისრის მიმართულებით,
უარყოფითი - საწინააღმდეგოდ.
როტაცია ხორციელდება იმ წერტილის გარშემო, რომელიც მითითებულია
თვისებით transform-origin.
სინტაქსი
სელექტორი {
transform: rotate(კუთხე);
}
მაგალითი
ამ მაგალითში ბლოკი მოტრიალებულია 30
გრადუსით საათის ისრის მიმართულებით:
<div id="elem">lorem ipsum</div>
#elem {
transform: rotate(30deg);
border: 1px solid black;
width: 100px;
height: 50px;
}
:
მაგალითი
ამ მაგალითში ბლოკი მოტრიალებულია 30
გრადუსით საათის ისრის საწინააღმდეგოდ:
<div id="elem">lorem ipsum</div>
#elem {
transform: rotate(-30deg);
border: 1px solid black;
width: 100px;
height: 50px;
}
:
მაგალითი
ამ მაგალითში ბლოკი კურსორის მიტანისას მოტრიალდება
1 ბრუნით, რადგან როტაციის მნიშვნელობა
მითითებულია 1turn-ში (იგივე ეფექტის მიღწევა შესაძლებელია,
თუ როტაციის კუთხე მითითებული იქნება 360deg-ში).
როტაციის შეუფერხებლობისთვის დამატებულია თვისება
transition:
<div id="elem">lorem ipsum</div>
#elem {
border: 3px solid black;
width: 100px;
height: 50px;
transition: transform 3s linear;
}
#elem:hover {
transform: rotate(1turn);
}
:
