Funktsioon translate

Funktsioon translate määrab elemendi nihke piki X-telge ja Y-telge. Kasutatakse koos omadusega transform. Omaduse väärtusteks on mis tahes suuruse ühikud.

Võib võtta ühe või kaks parameetrit. Kui parameetreid on kaks - esimene parameeter määrab nihke piki X-telge ja teine - piki Y-telge. Kui parameeter on üks, siis see määrab nihke piki X-telge.

Parameetrite väärtused võivad olla positiivsed ja negatiivsed. Positiivne väärtus piki X-telge nihutab paremale, negatiivne - vasakule. Positiivne väärtus piki Y-telge nihutab alla, negatiivne - üles.

Süntaks

valija {
	transform: translate(nihe piki X-telge, nihe piki Y-telge);
}

Näide

Kui hiirega bloki peale minna - see nihkub 30px võrra paremale:

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

#elem {
	border: 1px solid black;
	width: 100px;
	height: 50px;
}
#elem:hover {
	transform: translate(30px);
}

Näide

Kui hiirega bloki peale minna - see nihkub 30px võrra vasakule:

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

#elem {
	border: 1px solid black;
	width: 100px;
	height: 50px;
}
#elem:hover {
	transform: translate(-30px);
}

Näide

Kui hiirega bloki peale minna - see nihkub 15px võrra paremale ja 30px võrra alla:

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

#elem {
	border: 1px solid black;
	width: 100px;
	height: 50px;
}
#elem:hover {
	transform: translate(15px, 30px);
}

Vaata ka

funktsiooni translateX,
mis määrab nihke piki X-telge
funktsiooni translateY,
mis määrab nihke piki Y-telge