Функсияи rotateZ

Функсияи rotateZ гардондани унсур нисбати меҳвари Z дар фазои сеандозаро муайян мекунад. Аз он ҳамроҳ бо хосияти transform истифода мебарад. Қимати хосият кунҷест дар ҳар гуна воҳидҳои кунҷӣ. Қимати мусбат ба самти ақрабоқиммат ва манфӣ ба самти зидди ақрабоқиммат мегардонад. Гардондани унсур атрофи нуқтае сурат мегирад, ки бо хосияти transform-origin муайян карда мешавад.

Синтаксис

интихобкунанда {
	transform: rotateZ(кунҷ);
}

Намуна

Дар ин намуна, блок ҳангоми нигоҳдорӣ ба самти меҳвари Z ба андозаи 180 дараҷа гардонда мешавад. Барои ҳамвории гардиш хосияти transition илова карда шудааст:

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

#elem {
	border: 3px solid black;
	width: 100px;
	height: 50px;
	transition: transform 3s linear;
}
#elem:hover {
	transform: rotateZ(180deg);
}

Намуна

Меҳвари гардишро бо ёрии хосияти transform-origin иваз мекунем:

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

#elem {
	border: 3px solid black;
	width: 100px;
	height: 50px;
	transition: transform 3s linear;
	transform-origin: center bottom;
}
#elem:hover {
	transform: rotateZ(180deg);
}

Ҳамчунин бубинед

функсияи rotate,
ки гардондани унсур нисбати меҳварҳои X ва Y-ро муайян мекунад
функсияи rotateX,
ки гардондани унсур нисбати меҳвари X-ро муайян мекунад
функсияи rotateY,
ки гардондани унсур нисбати меҳвари Y-ро муайян мекунад
функсияи rotate3d,
ки гардондани унсур нисбати се меҳварро муайян мекунад