Lewati ke konten utama
忆云竹

Pembuat transformasi CSS 2D dan 3D

Atur pergeseran, rotasi, skala, kemiringan dan titik asal, dengan perspektif serta kontrol 3D bila diperlukan.

Opsi 3D
Pratinjau

Garis putus-putus menandai posisi awal. Urutan transformasi memengaruhi hasil; CSS ekspor mengikuti urutan yang sama dengan pratinjau.

CSS

Diproses di browser ini. Tidak ada data yang diunggah atau disimpan.

Tentang alat ini

Posisikan atau miringkan elemen sambil membandingkannya dengan garis bentuk semula.

Cara menggunakan

Ubah pergeseran X/Y, rotasi, skala per sumbu, kemiringan dan titik asal transformasi sambil membandingkan dengan garis bentuk awal. Aktifkan 3D untuk perspektif, pergeseran Z dan rotasi X/Y. Salin atau unduh deklarasi transform dan transform-origin.

Pratinjau dan ekspor memakai parameter serta urutan yang sama. Mengubah urutan fungsi dapat mengubah hasil. Skala negatif membalik elemen, sedangkan nol meratakan sumbu tersebut. Alat menghasilkan gaya elemen, bukan model 3D atau animasi lengkap.

Pertanyaan umum

Bisakah urutan fungsi diganti?

Urutan bisa diubah dengan menyunting CSS hasil ekspor secara manual; antarmuka tidak menyediakan pengaturan urutan fungsi. Pratinjau dan ekspor memakai urutan tetap yang sama. Mengubahnya dapat mengubah hasil. Skala negatif membalik sumbu; skala nol meratakan sumbu tersebut.

Mengapa posisi semula masih memakan ruang setelah elemen dipindah atau diperbesar?

Transformasi CSS mengubah cara elemen digambar tanpa memindahkan kotak tata letak aslinya. Elemen tetangga tetap ditata berdasarkan posisi semula. Atur jarak dengan aturan tata letak biasa, dan gunakan transform-origin untuk menentukan titik pusat transformasi visual.

Komentar

0
untuk bergabung dalam diskusi.
Belum ada komentar.
Utas balasan

Ikuti seluruh percakapan secara kronologis; setiap balasan menunjukkan pesan tertentu yang dijawab.