Translate-funktio

translate-funktio asettaa elementin siirron X-akselilla ja Y-akselilla. Sitä käytetään yhdessä transform-ominaisuuden kanssa. Ominaisuuden arvona voidaan käyttää mitä tahansa koko-yksikköä.

Se voi ottaa yhden tai kaksi parametria. Jos parametreja on kaksi - ensimmäinen parametri asettaa siirron X-akselilla ja toinen Y-akselilla. Jos parametria on vain yksi, se asettaa siirron X-akselilla.

Parametrien arvot voivat olla positiivisia tai negatiivisia. Positiivinen arvo X-akselilla siirtää oikealle, negatiivinen - vasemmalle. Positiivinen arvo Y-akselilla siirtää alas, negatiivinen - ylös.

Syntaksi

valitsija {
	transform: translate(siirto X-akselilla, siirto Y-akselilla);
}

Esimerkki

Jos viet hiiren blokin päälle - se siirtyy 30px oikealle:

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

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

Esimerkki

Jos viet hiiren blokin päälle - se siirtyy 30px vasemmalle:

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

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

Esimerkki

Jos viet hiiren blokin päälle - se siirtyy 15px oikealle ja 30px alas:

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

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

Katso myös

funktion translateX,
joka asettaa siirron X-akselilla
funktion translateY,
joka asettaa siirron Y-akselilla