Penjana Transform CSS

Bina pengisytiharan transform secara interaktif dengan gelangsar untuk translate (X/Y/Z), scale (X/Y), rotate (Z/X/Y), dan skew (X/Y), serta transform-origin boleh sunting dan saiz kotak pratonton boleh laras. CSS yang dijana menggunakan translate3d untuk terjemahan, menggabungkan scale/rotate/rotateX/rotateY/skew hanya apabila diubah, dan dikeluarkan bersama transform-origin.

1. Seret gelangsar di bawah Translate, Scale, Rotate, dan Skew untuk menyusun transform; setiap nilai juga mempunyai input angka untuk kemasukan tepat. 2. Laraskan Saiz Kotak Pratonton (50–250px) dan sunting Transform-Origin (sebarang rentetan asal CSS, lalai 50% 50%). 3. Klik Tetapkan Semula untuk mengembalikan setiap nilai kepada lalai neutral. 4. Klik Salin untuk menyalin kedua-dua pengisytiharan transform: ... dan transform-origin: ...

translateX/Y/Z: -200 hingga 200 px, dikeluarkan bersama sebagai translate3d(x, y, z) apabila mana-mana bukan sifar. scaleX/Y: 0.1 hingga 3, dikeluarkan sebagai scale(x, y) apabila salah satu berbeza daripada 1. rotate (Z): -360 hingga 360deg. rotateX/Y: -180 hingga 180deg. skewX/Y: -60 hingga 60deg, dikeluarkan sebagai skew(x, y) apabila salah satu bukan sifar. Jika tiada fungsi diubah outputnya ialah transform: none.