属性 transform-origin CSS

Definisi dan penggunaan

Sifat transform-origin memungkinkan Anda mengubah posisi elemen yang diubah.

Elemen transformat 2D dapat mengubah sumbu x dan y elemen. Elemen transformat 3D dapat mengubah sumbu Z nya.

Untuk memahami sifat transform-origin lebih baik, lihat iniPertunjukan.

Pengguna Safari/Chrome: Untuk memahami penggunaan sifat transform-origin untuk transformat 3D, lihat iniPertunjukan.

Keterangan:Sifat ini harus digunakan bersama dengan transform disebaliknya digunakan bersama.

Untuk memahami sifat transform lebih baik, lihat iniPertunjukan.

Lihat juga:

Panduan CSS3:Pertukaran 2D CSS3

Panduan CSS3:Pertukaran 3D CSS3

Panduan HTML DOM:Sifat transformOrigin

Contoh

Atur posisi titik asal elemen putar:

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

Coba sendiri

Ada lebih banyak contoh di bawah halaman.

Syarat CSS

transform-origin: sumbu X sumbu Y sumbu Z;

Nilai sifat

Nilai Deskripsi
sumbu X

Definisi tampilan ditempatkan di mana di sumbu X.Nilai yang mungkin:

  • kiri
  • tengah
  • kanan
  • panjang
  • %
sumbu Y

Definisi tampilan ditempatkan di mana di sumbu Y.Nilai yang mungkin:

  • atas
  • tengah
  • bawah
  • panjang
  • %
sumbu Z

Definisi tampilan ditempatkan di mana di sumbu Z.Nilai yang mungkin:

  • panjang

Detil teknologi

Nilai lalai: 50% 50% 0
Kewarisan: tidak
Versi: CSS3
Syarat Bahasa JavaScript: objek.style.transformOrigin="20% 40%"

Dukungan pereksa

Angka di dalam tabel menunjukkan versi pereksa pertama yang sepenuhnya mendukung sifat ini.

Angka di dalam tabel menunjukkan versi pereksa pertama yang mendukung sifat ini dengan prefix pertama.

Sifat Chrome IE Firefox Safari Opera
transform-origin
(语法 dua nilai)		 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
(语法 tiga nilai)		 36.0
12.0 -webkit-		 10.0 16.0
10.0 -moz-		 9.0
4.0 -webkit-		 23.0
15.0 -webkit-