CSS translate() Function

Paglalarawan at Paggamit

CSS translate() Ang function na ito ay nagbibigay-daan sa iyo na baguhin ang lokasyon ng elemento.

translate() Function sa transform Ginagamit sa katangian.

Mga Halimbawa

Baguhin ang Lokasyon ng Elemento:

#myDiv1 {
  transform: translate(50px); /* Ililipat ang elemento sa x-aksisa ng 50px at sa y-aksisa ng 0px */
}
#myDiv2 {
  transform: translate(50px, 20px); /* Ililipat ang elemento sa x-aksisa ng 50px at sa y-aksisa ng 20px */
}
#myDiv3 {
  transform: translate(100px, 30px); /* Ililipat ang elemento sa x-aksisa ng 100px at sa y-aksisa ng 30px */
}

Tutukan ang Iyong Sarili

CSS Grammar

translate(x, y)
Halaga Paglalarawan
x Mahalaga. Tukuyin ang layong kilusan ng elemento sa x-aksisa, maaaring ito ay numero o porsyento.
y

Opisyon. Tukuyin ang layong kilusan ng elemento sa y-aksisa, maaaring ito ay numero o porsyento.

Kung pinapigilang maglagay, ang halaga ay na-set sa 0.

Teknikal na Detalye

Bersyon: CSS Transforms Module Level 1

Browser Support

Ang numero sa talahanayan ay nangangahulugang ang unang bersyon ng browser na ganap na sumusuporta sa function.

Chrome Edge Firefox Safari Opera
1 12 3.5 3.1 10.5

Relevanteng Pahina

Tuturuan:CSS 2D Transformasyon

参考:CSS transform 属性

参考:CSS translateX() 函数

参考:CSS translateY() 函数

参考:HTML DOM transform 属性