Lewati ke konten utama
iotools.cloudiotools.cloud

Generator Transformasi CSS

Hasilkan deklarasi CSS transform yang menggabungkan translate, rotate, scale dan skew menjadi satu shorthand yang siap ditempel.

Input

Output

CSS
Apakah ini membantu?

Cara lain menggunakan alat ini

REST API

curl -X POST https://api.iotools.cloud/v1/tool/css-transform-generator \
  -H "Authorization: Bearer YOUR_API_KEY" \
  -H "Content-Type: application/json" \
  -d '{
    "translateX": "10",
    "translateY": "20",
    "rotate": "45",
    "scaleX": "1.5",
    "scaleY": "1.5",
    "skewX": "0",
    "skewY": "0"
  }'

Ganti dengan kunci Anda sendiri dari akun Anda. Bidang alat menjadi isi permintaan — tanpa pembungkus.

Tanyakan ke agen AI

Use the IOTools `css-transform-generator` tool (CSS Transform Generator) on this input:

YOUR_INPUT_HERE

Tempelkan ini ke agen mana pun yang terhubung ke server MCP IOTools, lalu tambahkan input Anda.

Widget sematan

<iframe
  src="https://iotools.cloud/embed/css-transform-generator/"
  width="100%" height="520" frameborder="0" scrolling="no" loading="lazy"
  title="Generator Transformasi CSS — iotools.cloud"
  sandbox="allow-scripts allow-forms allow-same-origin allow-downloads allow-popups allow-popups-to-escape-sandbox"
  allow="clipboard-write"
  style="width:100%;border:1px solid #e5e7eb;border-radius:12px;overflow:hidden"></iframe>
<script src="https://iotools.cloud/embed.js" async></script>

Tempelkan ini di halaman Anda sendiri — gratis, tanpa kunci, cukup tautan balik.

Biaya per panggilan API/MCPMulai dari 5 kredit
Butuh kredit lebih?Lihat harga

Juga tersedia melalui

IntegrasiEkstensi browserEkstensi VS Code

Panduan

Apa yang dilakukannya

Generator Transformasi CSS menggabungkan nilai translate, rotate, scale dan skew menjadi satu deklarasi transform: yang siap ditempel. Sesuaikan slider dan bidang nomor serta CSS yang dihasilkan akan diperbarui secara instan — tidak perlu menulis sintaks fungsi dengan tangan atau mengingat urutan yang CSS harapkan.

Fungsi transform

Deklarasi CSS transform adalah daftar fungsi yang dipisahkan oleh spasi, masing-masing mengubah elemen dengan cara berbeda:

  • translate(x, y) — memindahkan elemen secara horizontal dan vertikal, dalam piksel. X positif bergerak ke kanan, Y positif bergerak ke bawah.
  • rotate(deg) — memutar elemen searah jarum jam di sekitar asal-usulnya (pusat, secara default). Nilai negatif memutar berlawanan arah jarum jam.
  • scale(x, y) — mengubah ukuran elemen di sepanjang setiap sumbu. 1 adalah ukuran asli, 2 menggandakannya, 0.5 mempersingkatnya, dan nilai negatif membalik elemen di sepanjang sumbu tersebut.
  • skew(x, y) — memiringkan elemen di sepanjang setiap sumbu, dalam derajat, menghasilkan distorsi seperti jajaran genjang yang sering digunakan untuk judul atau efek kartu yang bergaya.

Urutan fungsi penting

Browser menerapkan fungsi transform dalam urutan yang ditulis, masing-masing beroperasi pada sistem koordinat yang ditinggalkan oleh fungsi sebelumnya. Alat ini selalu menulisnya dalam urutan tetap — translate, rotate, scale, skew — yang merupakan urutan paling dapat diprediksi untuk menggabungkan offset, rotasi dan pengukuran tanpa satu fungsi memutar efek fungsi lain. Jika Anda memerlukan urutan komposisi yang berbeda untuk efek tertentu, urutkan kembali fungsi secara manual setelah menyalin CSS.

Untuk menjaga output tetap bersih, suatu fungsi hanya disertakan jika benar-benar mengubah sesuatu: translate(0px, 0px), rotate(0deg), scale(1, 1) dan skew(0deg, 0deg) semuanya adalah no-ops, jadi dihilangkan. Jika setiap nilai berada pada nilai defaultnya, alat menampilkan transform: none;.

Cara menggunakannya

  1. Tetapkan Translasi X dan Translasi Y untuk memindahkan elemen, dalam piksel.
  2. Tarik Rotasi untuk memutarnya, dalam derajat (-360 hingga 360).
  3. Tetapkan Skala X dan Skala Y untuk mengubah ukurannya — 1 mempertahankan ukuran asli.
  4. Tarik Skew X dan Skew Y untuk memiringkannya, dalam derajat.
  5. Salin deklarasi transform yang dihasilkan dari output kode dan tempel ke lembar gaya Anda.

FAQ

Mengapa scale adalah angka biasa bukan persentase? Fungsi CSS scale() menggunakan pengali tanpa satuan, bukan persentase — 1.5 berarti 150% dari ukuran asli, 0.5 berarti 50%. Mencocokkan sintaks CSS mentah berarti Anda dapat menempel output secara langsung tanpa konversi.

Bisakah saya menganimasi transform yang dibuat dengan alat ini? Ya — transform adalah target umum untuk properti CSS transition/animation. Tambahkan aturan transition: transform 0.3s ease; di sebelahnya (pada keadaan dasar atau :hover) untuk menganimasikan nilai-nilai.

Apakah urutan translate/rotate/scale/skew mengubah hasil visual? Ya. Karena setiap fungsi beroperasi pada sistem koordinat yang ditinggalkan oleh fungsi sebelumnya, translate() kemudian rotate() menghasilkan hasil yang berbeda daripada rotate() kemudian translate(). Alat ini menggunakan urutan tetap yang dapat diprediksi; edit CSS yang disalin dengan tangan jika Anda memerlukan komposisi yang berbeda.

Apakah alat ini menyimpan atau mengunggah apa pun? Tidak. Semua perhitungan berjalan secara lokal di browser Anda — nilai Anda tidak pernah meninggalkan perangkat Anda.

csstransformgeneratortranslaterotatescaleskewweb design

Suka alat-alatnya? Hilangkan iklannya.

Satu kali pembayaran menghapus semua iklan dari akun Anda, selamanya. Tanpa langganan, tanpa pelacakan.

Hapus iklan