CSS translate 属性

Tinukoy at Paggamit

translate Katangian ay nagbibigay ng kapangyarihan upang baguhin ang lokasyon ng elemento.

translate Katangian ay nagtutukoy sa x-axis at y-axis koordinado ng elemento sa dalawang dimensyonal na espasyo. Maaari mo ring itakda ang z-axis koordinado upang baguhin ang lokasyon sa tatlong dimensyonal na espasyo.

Ang koordinado ay maaaring magkaroon lamang ng x-axis koordinado, o x-axis at y-axis koordinado, o x-axis, y-axis at z-axis koordinado.

Para sa mas mabuting pag-unawa translate Katangian, tingnan:Pagtatanghal.

Tip:Para ang katangian ng z-axis na magiging epektibo, kailangan mong itakda ang halaga ng CSS perspective katangian.

Bilinan:Isa pang teknolohiya para sa paglipat ng elemento ay ang paggamit ng kasama ng CSS translate() 函数 Ang CSS transform katangian ng pahina ito ay maaaring sabihin na isang mas madaling at mas direktang paraan upang ilipat ang elemento.

Sample

Example 1

Baguhin ang lokasyon ng elemento:

div {
  translate: 100px 20px;
}

Subukan Lang

Example 2

kapag naitatalaga ang z-axis translate katangian, dapat naiset din sa magulang na elemento perspective Ang katangian, kailangan naming mag-set ng anumang epekto:

DIV1 {
  perspective: 200px;
}
DIV2 {
  translate: 50px 50px 50px;
}

Subukan Lang

Syntax ng CSS

translate: x-axis y-axis z-axis|initial|inherit;

Halaga ng Katangian

Detalye ng Teknolohiya

Suporta ng Browser

Ang numero sa talahanayan ay ipinapakita ang unang bersyon ng browser na ganap na sumusuporta sa katangian.

kaugnay na pahina

CSS Turo:CSS 2D 变换

CSS Turo:CSS 3D 变换

CSS Pambigay ng Impormasyon:CSS scale 属性

CSS Pambigay ng Impormasyon:CSS rotate 属性

CSS Pambigay ng Impormasyon:CSS perspective 属性