Transform-origin - Trik CSS | CSS Almanac 2025

The transform-originharta yang digunakan bersama dengan jelmaan CSS, membiarkan anda menukar tempat asal daripada mengubah.

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

Seperti yang ditunjukkan di atas, transform-originharta tanah dapat mengambil hingga dua nilai kata kunci atau panjang yang dipisahkan ruang untuk transformasi 2D dan hingga tiga nilai untuk transformasi 3D.

Menggunakan kod di atas pada kotak 200px x 200px, dengan transformasi yang diterapkan pada peralihan menggunakan peristiwa klik, akan berkelakuan seperti ini:

Lihat Pen ini!

Secara lalai, asal transformasi adalah "50% 50%", yang betul-betul berada di tengah-tengah elemen tertentu. Mengubah asal menjadi "kiri atas" (seperti dalam demo di atas) menyebabkan elemen menggunakan sudut kiri atas elemen sebagai titik putaran.

Nilai boleh menjadi panjang, peratusan atau kata kunci top, left, right, bottom, dan center.

Nilai pertama adalah kedudukan mendatar, nilai kedua adalah menegak, dan nilai ketiga mewakili kedudukan pada paksi Z. Nilai ketiga hanya akan berfungsi jika anda menggunakan transformasi 3D, dan tidak boleh menjadi peratusan.

Lihat ilustrasi asal transformasi Pen oleh Shaw (@shshaw) di CodePen.