Properti asal transformasi CSS
Contoh
Setel penempatan dasar elemen yang diputar:
div
{
transform: rotate(45deg);
transform-origin: 20% 40%;
}
Definisi dan Penggunaan
Properti transform-origin
ini memungkinkan Anda untuk mengubah posisi elemen yang diubah.
Transformasi 2D dapat mengubah sumbu x dan y suatu elemen. Transformasi 3D juga dapat mengubah sumbu z suatu elemen.
Untuk lebih memahami transform-origin
properti,
lihat demo .
Catatan: Properti ini harus digunakan bersama dengan properti transformasi .
Tip: Untuk lebih memahami properti ini untuk transformasi 3D , lihat demo .
Nilai bawaan: | 50% 50% 0 |
---|---|
Diwarisi: | tidak |
Animasi: | Ya. Baca tentang animasi |
Versi: kapan: | CSS3 |
Sintaks JavaScript: | objek .style.transformOrigin="0 0" |
Dukungan Peramban
Angka-angka dalam tabel menentukan versi browser pertama yang sepenuhnya mendukung properti.
Angka yang diikuti oleh -webkit-, -moz-, atau -o- menentukan versi pertama yang berfungsi dengan awalan.
Property | |||||
---|---|---|---|---|---|
transform-origin (two-value syntax) |
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 (three-value syntax) |
36.0 12.0 -webkit- |
10.0 | 16.0 10.0 -moz- |
9.0 4.0 -webkit- |
23.0 15.0 -webkit- |
Sintaks CSS
transform-origin: x-axis y-axis z-axis|initial|inherit;
Nilai properti
Property Value | Description |
---|---|
x-axis | Defines where the view is placed at the x-axis. Possible values:
|
y-axis | Defines where the view is placed at the y-axis. Possible values:
|
z-axis | Defines where the view is placed at the z-axis (for 3D transformations). Possible values:
|
initial | Sets this property to its default value. Read about initial |
inherit | Inherits this property from its parent element. Read about inherit |
Halaman Terkait
Tutorial CSS: Transformasi CSS 2D
Tutorial CSS: Transformasi 3D CSS
Referensi DOM HTML: properti transformOrigin