Die translateY-funksie

Die funksie translateY spesifiseer 'n skuif van 'n element op die Y-as. Dit word saam met die eienskap transform gebruik. Die waarde kan enige eenhede vir grootte wees. 'n Positiewe waarde skuif die element afwaarts, 'n negatiewe een - opwaarts.

Sintaksis

cssselektor {
  transform: translateY(skuif);
}

Voorbeeld

As jy met die muis oor die blok beweeg - sal dit skuif met 30px afwaarts:

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

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

Результат:

Voorbeeld

As jy met die muis oor die blok beweeg - sal dit skuif met 30px opwaarts:

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

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

Результат:

Sien ook