CSS translate özelliği

önceki sayfa transition-timing-function
Sonraki sayfa unicode-bidi

Tanım ve Kullanım

translate Özelliği, elementin konumunu değiştirmenize olanak tanır.

translate Özelliği, elementin iki boyutlu alandaki x ve y eksen koordinatlarını tanımlar. Ayrıca, üç boyutlu alanda konumu değiştirmek için z eksen koordinatı tanımlayabilirsiniz.

Koordinatlar, yalnızca x eksen koordinatı, x ve y eksen koordinatları veya x, y ve z eksen koordinatları olarak verilabilir.

Bu konuyu daha iyi anlamak için: translate Özellikler hakkında daha fazla bilgi için bkz:Gösterim.

İpucu:Z eksenindeki özellikler geçerli olabilmesi için, CSS perspective özelliğine bir değer tanımlamanız gerekiyor.

Dikkat:Elementleri kaydırmak için kullanılan diğer bir teknik, CSS translate() fonksiyonu Bu sayfadaki CSS transform özelliği, elementleri kaydırmak için daha basit ve daha doğrudan bir yöntemdir.

Örnek

Örnek 1

Elemanın konumunu değiştirmek için:

div {
  translate: 100px 20px;
}

Kişisel Deneyim

Örnek 2

Z eksenini ayarlamak için translate özelliklerini ayarlamak için, ebeveyn elemanında da ayarlanmalıdır perspective Özellikleri, herhangi bir etki görebilmemiz için ayarlamamız gerekiyor:

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

Kişisel Deneyim

CSS Dilbilgisi

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

Özellik Değeri

Değer	Tanım
x-axis	X eksenindeki konumu tanımlar. Olası değerler: Uzunluk Yüzde
y-axis	Y eksenindeki konumu tanımlar. Olası değerler: Uzunluk Yüzde
z-axis	Z eksenindeki konumu tanımlar. Olası değerler: Uzunluk Yüzde
initial	Bu özelliği varsayılan değerine ayarlar. bkz: initial.
inherit	Bu özelliği ebeveyn elemanından miras alır. bkz: inherit.

Teknik Ayrıntılar

Varsayılan Değer:	none
Miraslık:	Hayır
Animasyon Yapımı:	Desteği var. bkz:Animasyon İlgili Özellikler.
Sürüm:	CSS3
JavaScript Dilbilgisi:	object.style.translate="10px 20px"