CSS transform-origin özelliği

Kurs önerileri：

Tanım ve kullanım

Transform-origin özelliği, dönüştürülen elementin konumunu değiştirmenize olanak tanır.

2D dönüşüm elementleri elementin x ve y eksenlerini değiştirebilir. 3D dönüşüm elementleri Z eksenini de değiştirebilir.Gösterim。

Transform-origin özelliğini daha iyi anlamak için lütfen buyu izleyinGösterim。

Safari/Chrome kullanıcıları: Transform-origin özelliğinin 3D dönüşüm için kullanıldığını daha iyi anlamak için lütfen buyu izleyinYorum: transform ile birlikte kullanılır.

Transform özelliğini daha iyi anlamak için lütfen buyu izleyinGösterim。

Ayrıca bkz：

CSS3 eğitimi：CSS3 2D dönüşüm

CSS3 eğitimi：CSS3 3D dönüşüm

HTML DOM referans el kitabı：transformOrigin özelliği

örnek

Döndürme elementinin temel noktası konumunu ayarlayın：

div {
  transform: rotate(45deg);
  transform-origin: 20% 40%;
}

Kişisel olarak deneyin

Sayfa altında daha fazla örnek bulunmaktadır.

CSS dilbilgisi

transform-origin: x-axis y-axis z-axis;

özellik değeri

değer tanım
x-axis

Görünümün X eksenine yerleştirildiği yer belirtir. Olası değerler：

  • sol
  • merkez
  • sağ
  • uzunluk
  • %
y-axis

Görünümün Y eksenine yerleştirildiği yer belirtir. Olası değerler：

  • üst
  • merkez
  • düşük
  • uzunluk
  • %
z-axis

Görünümün Z eksenine yerleştirildiği yer belirtir. Olası değerler：

  • uzunluk

Teknik ayrıntılar

Öntanımlı değer： 50% 50% 0
Mirasçılık： hayır
Sürüm： CSS3
JavaScript dilbilgisi： nesne.style.transformOrigin="20% 40%"

Tarayıcı desteği

Tablo中的数字注明了完全支持该属性的首个浏览器版本。

webkit-, moz- veya ms- ile başlayan sayılar, öne ekli ilk sürümü kullanır.

Özellik Chrome IE Firefox Safari Opera
transform-origin
(İki değer dilimi)		 36.0
4.0 -webkit-		 10.0
9.0 -ms-		 16.0
3.5 -moz-		 9.0
3.2 -webkit-		 23.0
15.0 -webkit-
10.5 -o-
transform-origin
(Üç değer dilimi)		 36.0
12.0 -webkit-		 10.0 16.0
10.0 -moz-		 9.0
4.0 -webkit-		 23.0
15.0 -webkit-