Transform-origin - Trik CSS | CSS Almanak 2024

The transform-originproperti digunakan dalam hubungannya dengan transformasi CSS, membiarkan Anda mengubah titik asal dari transformasi.

.box ( transform: rotate(360deg); transform-origin: top left; )

Seperti yang ditunjukkan di atas, transform-originproperti dapat menggunakan hingga dua kata kunci yang dipisahkan spasi atau nilai panjang untuk transformasi 2D dan hingga tiga nilai untuk transformasi 3D.

Menggunakan kode di atas pada kotak 200px kali 200px, dengan transformasi yang diterapkan ke transisi menggunakan event klik, akan berperilaku seperti ini:

Lihat Pena ini!

Secara default, asal transformasi adalah "50% 50%", yang berada tepat di tengah elemen tertentu. Mengubah asal ke "kiri atas" (seperti pada demo di atas) menyebabkan elemen menggunakan sudut kiri atas elemen sebagai titik rotasi.

Nilai bisa panjang, persentase atau kata kunci top, left, right, bottom, dan center.

Nilai pertama adalah posisi horizontal, nilai kedua adalah vertikal, dan nilai ketiga mewakili posisi pada sumbu Z. Nilai ketiga hanya akan berfungsi jika Anda menggunakan transformasi 3D, dan tidak boleh dalam persentase.

Lihat ilustrasi Pen transform-origin oleh Shaw (@shshaw) di CodePen.