Transform menggeser, memutar, dan menskalakan elemen tanpa memengaruhi layout di sekelilingnya. Section ini membahas fungsi transform 2D dan 3D, transform-origin, perspective, serta use cases yang umum dipakai pada antarmuka modern.

# Translate, Rotate, dan Scale

Kuasai tiga fungsi transform yang paling sering dipakai: menggeser, memutar, dan menskalakan elemen tanpa mengganggu layout.

Buka → # Transform Origin

Atur titik poros transform dengan transform-origin dan pahami mengapa rotasi yang sama dapat menghasilkan posisi akhir yang berbeda.

Buka → # Transform Functions

Jelajahi keluarga fungsi transform 2D, pelajari cara browser menyerialisasikannya menjadi matrix(), dan buktikan bahwa urutan fungsi mengubah hasil.

Buka → # Perspective

Beri kedalaman pada transform 3D dengan properti perspective dan fungsi perspective(), lalu pilih nilai yang pas untuk efek yang diinginkan.

Buka → # 3D Transforms

Putar elemen pada sumbu X, Y, dan Z dengan rotateX, rotateY, translateZ, transform-style: preserve-3d, serta backface-visibility untuk kartu flip.

Buka → # Transform Use Cases

Terapkan transform pada pola antarmuka yang lazim: kartu lift, badge miring, pemusatan absolut, kartu flip, dan lapisan parallax.

Buka →