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);
}
:
