Sifat transform-origin
Sifat transform-origin menetapkan titik,
berbanding mana transformasi elemen akan berlaku,
ditentukan oleh sifat transform.
Secara lalai, titik ini ialah pusat elemen,
dan, sebagai contoh, putaran akan berlaku berbanding
pusatnya. Walau bagaimanapun, tingkah laku ini boleh diubah
dan membuat elemen berputar berbanding
sisi, sudut atau titik yang terletak di luar elemen.
Sintaks
pemilih {
transform-origin: paksi-X paksi-Y paksi-Z;
}
Nilai untuk paksi Y dan Z bukanlah wajib, boleh ditinggalkan (ia akan mengambil nilai lalai). Anjakan titik pada paksi Z diperlukan untuk transformasi 3D.
Nilai untuk paksi X
| Nilai | Keterangan |
|---|---|
| Unit CSS | Nilai ialah sebarang unit untuk saiz, yang menetapkan jarak pusat transformasi dari sempadan kiri elemen. Nilai positif mengalihkan pusat transformasi ke kanan (ke dalam elemen), manakala nilai negatif - ke kiri (ke luar dari elemen) berbanding sempadan kiri elemen. |
left |
Titik putaran mengufuk pada sempadan kiri elemen. |
right |
Titik putaran mengufuk pada sempadan kanan elemen. |
center |
Titik putaran mengufuk di pusat elemen. |
Nilai lalai: center.
Nilai untuk paksi Y
| Nilai | Keterangan |
|---|---|
| Unit CSS | Nilai ialah sebarang unit untuk saiz, yang menetapkan jarak pusat transformasi dari sempadan atas elemen. Nilai positif mengalihkan pusat transformasi ke bawah (ke dalam elemen), manakala nilai negatif - ke atas (di luar elemen) berbanding sempadan atas elemen. |
top |
Titik putaran menegak pada sempadan atas elemen. |
bottom |
Titik putaran menegak pada sempadan bawah elemen. |
center |
Titik putaran menegak di pusat elemen. |
Nilai lalai: center.
Nilai untuk paksi Z
| Nilai | Keterangan |
|---|---|
| Unit CSS | Nilai ialah sebarang unit untuk saiz, yang menetapkan jarak pusat transformasi dari satah elemen. Nilai positif mengalihkannya ke arah kita (dari satah skrin), manakala nilai negatif menjauhi kita. |
Nilai lalai: 0px.
Contoh
Sekarang nilai sifat transform-origin tidak ditetapkan dan blok akan berputar berbanding pusatnya. Letakkan kursor tetikus pada blok untuk melihat kesannya:
<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
Sekarang apabila kursor di atas, blok akan berputar berbanding 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
Sekarang apabila kursor di atas, blok akan berputar berbanding
sudut kanan bawah. Untuk ini, titik transformasi perlu diletakkan
pada 100% ke kanan
dan 100% ke bawah (boleh juga ditetapkan
dalam px, tetapi jika saiz elemen berubah
titik transformasi akan kekal di tempatnya,
oleh itu lebih baik dalam %):
<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
Putarkan blok berbanding 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
Putarkan blok berbanding pusat sisi kiri.
Untuk ini, untuk paksi X tetapkan left (titik
putaran akan di kiri), dan untuk paksi Y - center
(titik putaran akan di pusat secara menegak):
<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
Sifat boleh ditetapkan bukan hanya untuk putaran,
tetapi juga untuk transformasi lain. Mari besarkan
skala menggunakan scale, dengan menetapkan 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
Sekarang tetapkan 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 boleh ditetapkan di luar elemen. Dalam contoh seterusnya, apabila kursor tetikus diletakkan pada blok merah, blok hitam akan melakukan putaran berbanding 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);
}
:
