Properti transform-origin
Properti transform-origin mengatur titik,
relatif terhadap transformasi elemen akan terjadi,
yang ditentukan oleh properti transform.
Secara default, titik ini adalah pusat elemen,
dan, misalnya, rotasi akan terjadi relatif terhadap
pusatnya. Namun, perilaku ini dapat diubah
dan membuat elemen berotasi relatif terhadap
sisi, sudutnya, atau bahkan relatif terhadap
titik yang berada di luar elemen.
Sintaksis
selektor {
transform-origin: sumbu-X sumbu-Y sumbu-Z;
}
Nilai untuk sumbu Y dan Z tidak wajib, dapat dihilangkan (nilai default akan digunakan). Pergeseran titik pada sumbu Z diperlukan untuk transformasi 3D.
Nilai untuk sumbu X
| Nilai | Keterangan |
|---|---|
| Satuan CSS | Nilai berupa satuan untuk ukuran apa pun, yang mengatur jarak pusat transformasi dari batas kiri elemen. Nilai positif menggeser pusat transformasi ke kanan (ke dalam elemen), sedangkan nilai negatif - ke kiri (ke luar dari elemen) relatif terhadap batas kiri elemen. |
left |
Titik rotasi secara horizontal pada batas kiri elemen. |
right |
Titik rotasi secara horizontal pada batas kanan elemen. |
center |
Titik rotasi secara horizontal di pusat elemen. |
Nilai default: center.
Nilai untuk sumbu Y
| Nilai | Keterangan |
|---|---|
| Satuan CSS | Nilai berupa satuan untuk ukuran apa pun, yang mengatur jarak pusat transformasi dari batas atas elemen. Nilai positif menggeser pusat transformasi ke bawah (ke dalam elemen), sedangkan nilai negatif - ke atas (di luar elemen) relatif terhadap batas atas elemen. |
top |
Titik rotasi secara vertikal pada batas atas elemen. |
bottom |
Titik rotasi secara vertikal pada batas bawah elemen. |
center |
Titik rotasi secara vertikal di pusat elemen. |
Nilai default: center.
Nilai untuk sumbu Z
| Nilai | Keterangan |
|---|---|
| Satuan CSS | Nilai berupa satuan untuk ukuran apa pun, yang mengatur jarak pusat transformasi dari bidang elemen. Nilai positif menggesernya ke arah kita (dari bidang layar), sedangkan nilai negatif menjauh dari kita. |
Nilai default: 0px.
Contoh
Saat ini nilai properti transform-origin tidak diatur dan blok akan berputar relatif terhadap pusatnya. Arahkan kursor mouse ke blok untuk melihat efeknya:
<div id="elem">lorem ipsum</div>
#elem {
border: 1px solid black;
width: 100px;
height: 50px;
}
#elem:hover {
transform-origin: center center;
transform: rotate(30deg);
}
:
Contoh
Dan sekarang saat kursor diarahkan, blok akan berputar relatif terhadap sudut kiri atas:
<div id="elem">lorem ipsum</div>
#elem {
border: 1px solid black;
width: 100px;
height: 50px;
}
#elem:hover {
transform-origin: 0px 0px;
transform: rotate(30deg);
}
:
Contoh
Dan sekarang saat kursor diarahkan, blok akan berputar relatif terhadap
sudut kanan bawah. Untuk ini, titik transformasi harus dipindahkan
sejauh 100% ke kanan
dan 100% ke bawah (bisa juga ditentukan
dalam px, tetapi jika ukuran elemen berubah
titik transformasi akan tetap di tempat,
oleh karena itu lebih baik menggunakan %):
<div id="elem">lorem ipsum</div>
#elem {
border: 1px solid black;
width: 100px;
height: 50px;
}
#elem:hover {
transform-origin: 100% 100%;
transform: rotate(30deg);
}
:
Contoh
Putar blok relatif terhadap sudut kanan atas:
<div id="elem">lorem ipsum</div>
#elem {
border: 1px solid black;
width: 100px;
height: 50px;
}
#elem:hover {
transform-origin: 100% 0%;
transform: rotate(30deg);
}
:
Contoh
Putar blok relatif terhadap pusat sisi kiri.
Untuk ini, untuk sumbu X atur left (titik
rotasi akan berada di kiri), dan untuk sumbu Y - center
(titik rotasi akan berada di tengah secara vertikal):
<div id="elem">lorem ipsum</div>
#elem {
border: 1px solid black;
width: 100px;
height: 50px;
}
#elem:hover {
transform-origin: left center;
transform: rotate(30deg);
}
:
Contoh
Properti dapat diatur tidak hanya untuk rotasi,
tetapi juga untuk transformasi lainnya. Mari tingkatkan
skala menggunakan scale, dengan menentukan titik
transformasi sebagai sudut kiri bawah:
<div id="elem">lorem ipsum</div>
#elem {
border: 1px solid black;
width: 100px;
height: 50px;
}
#elem:hover {
transform-origin: left bottom;
transform: scale(1.5);
}
:
Contoh
Dan sekarang tentukan titik transformasi sebagai sudut kanan atas:
<div id="elem">lorem ipsum</div>
#elem {
border: 1px solid black;
width: 100px;
height: 50px;
}
#elem:hover {
transform-origin: right top;
transform: scale(1.5);
}
:
Contoh
Titik transformasi juga dapat diatur di luar elemen. Dalam contoh berikut, saat kursor mouse diarahkan ke blok merah, blok hitam akan melakukan rotasi relatif terhadap titik yang berada di luar:
<div id="hover"></div>
<div id="elem"></div>
#hover {
border: 1px solid red;
width: 50px;
height: 50px;
}
#elem {
border: 1px solid black;
width: 100px;
height: 50px;
transition: transform 1s;
transform-origin: -100px -100px;
}
#hover:hover + #elem {
transform: rotate(30deg);
}
:
