Atribut transform-origin CSS

Definisi dan penggunaan

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

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

Untuk mengerti transform-origin atribut lebih baik, lihat iniDemosi.

Pengguna Safari/Chrome: Untuk mengerti transform-origin atribut digunakan untuk transisi 3D, lihat iniDemosi.

Keterangan:Atribut ini harus digunakan bersama dengan transform dipakai bersama-sama.

Untuk mengerti transform atribut lebih baik, lihat iniDemosi.

Lihat juga:

Panduan CSS3:Transformasi 2D CSS3

Panduan CSS3:Transformasi 3D CSS3

Panduan HTML DOM:Atribut transformOrigin

Contoh

Atur posisi asal elemen berputar:

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

Coba sendiri

Ada contoh lain di bawah halaman.

Sintaks CSS

transform-origin: sumbu X sumbu Y sumbu Z;

Nilai atribut

Nilai Deskripsi
sumbu X

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

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

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

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

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

  • panjang

Detil teknis

Nilai default: 50% 50% 0
Inheritsi: tidak
Versi: CSS3
Sintaks JavaScript: objek.style.transformOrigin="20% 40%"

Dukungan browser

Angka di tabel menandai versi browser pertama yang mendukung atribut ini.

Angka dengan -webkit-、-moz- atau -ms- menunjukkan versi awal yang menggunakan prefiks.

Atribut Chrome IE Firefox Safari Opera
transform-origin
(Dua nilai sintaks)		 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 sintaks)		 36.0
12.0 -webkit-		 10.0 16.0
10.0 -moz-		 9.0
4.0 -webkit-		 23.0
15.0 -webkit-