Die translate-funksie

Die funksie translate stel die verskuiwing van 'n element op die X-as en Y-as. Dit word saam gebruik met die eienskap transform. Die waarde van die eienskap is enige eenhede vir grootte.

Dit kan een of twee parameters aanvaar. As daar twee parameters is - stel die eerste parameter die verskuiwing op die X-as, en die tweede een - op die Y-as. As daar een parameter is, stel dit die verskuiwing op die X-as.

Parameterwaardes kan positief en negatief wees. 'n Positiewe waarde op die X-as skuif na regs, 'n negatiewe - na links. 'n Positiewe waarde op die Y-as skuif afwaarts, 'n negatiewe - opwaarts.

Sintaksis

cssselekteerder {
  transform: translate(verskuiwing op X-as, verskuiwing op Y-as);
}

Voorbeeld

As jy die muis oor die blok beweeg - sal dit verskuif met 30px na regs:

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

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

Результат:

Voorbeeld

As jy die muis oor die blok beweeg - sal dit verskuif met 30px na links:

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

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

Результат:

Voorbeeld

As jy die muis oor die blok beweeg - sal dit verskuif met 15px na regs en met 30px afwaarts:

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

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

Результат:

Sien ook