Tidak suka iklan? Pergi Bebas Iklan Hari ini 

Generator Transformasi CSS

PengembangMatematika

IKLAN · HAPUS?

MEMASUKKAN

Proses Otomatis

Transformasi Preset

Telah ditetapkan sebelumnya

Transformasi 2D

Putar (derajat): 0

Skala X: 10

Skala Y: 10

Tidak simetris (derajat): 0

Tidak terlalu (derajat): 0

Terjemahan ukuran X (px): **Catatan:** Jika X adalah angka atau variabel yang harus diterjemahkan, gunakan **X** dalam bahasa Indonesia. Contoh: "Ukuran X (piksel):" 0

Terjemahkan ukuran Y (px): --- **Jawaban:** **Tidak ada teks yang dapat diterjemahkan di sini karena hanya ada perintah "Translate" dan tanda kurung.** 0

Transformasi 3D

Putar X (derajat): 0

Putar Y (derajat): 0

Putar Z (derajat): 0

Tampilan (px): 800

Mengubah Asal-Awal

Gunakan Asal Domain Kustom

Asal Usul X (%): 50

Asal usul Y (%): 50

Pilihan

Sertakan Prefiks Penjualan

Pratinjau Animasi

KELUARAN

Sisi klien

IKLAN · HAPUS?

Memandu

Kontainer Post TRP dengan ID post '192401' Generator Transform CSS

Generator Transformasi CSS

Bangun visual CSS properti transform dengan preview nyata. Sesuaikan slider transform 2D dan 3D untuk putar (rotate), skala (scale), geser (skew), geser (translate), dan perspektif, kemudian salin CSS yang dihasilkan. Berisi pemilih grid asal transform, tombol toggle preview animasi, dan preset satu klik untuk efek umum seperti balik (flips) dan condong (tilts).

Cara Penggunaan

Drag oleskan sliders untuk menyesuaikan setiap properti transform dan lihat efek yang diterapkan pada elemen preview secara real-time. Gunakan bagian 2D untuk putar (rotate), skala, skew, dan translate. Beralih ke bagian 3D untuk rotateX, rotateY, rotateZ, dan perspective. Klik selaput apapun dalam grid asal transform untuk mengubah titik pusat rotasi. Coba preset untuk efek cepat, atau toggle preview animasi untuk melihat transform beranimasi secara berulang. Salin CSS yang telah dihasilkan ketika Anda puas dengan hasilnya.

Fitur

Pembacaan Visual Lihat transformasi yang diterapkan pada elemen demo secara instan saat Anda mengatur slider.
Transformasi 2D Ganti, skala X/Y, geser X/Y, geser (skew) X/Y, dan geser X/Y dengan kontrol slider yang presisi
Transformasi 3D Rotasi X, rotasi Y, rotasi Z, dan perspektif untuk efek kedalaman
Jaringan Grid Transformasi Asal Pilihan grid 3×3 visual untuk menentukan titik pusat putar, bersama dengan input persentase yang disesuaikan.
Preset Efek satu klik: Balik Horisontal, Balik Vertikal, Geser Kiri, Geser Kanan, Balik Kartu 3D, Keluar Terus
Pratinjau Animasi – Geser untuk melihat animasi transformasi berjalan dengan lancar dalam loop menggunakan transisi CSS
Keluar CSS Bersih – Kombinasikan string transform dengan transform-origin dan prefiks vendor opsional
Ulangi Semua Kembalikan semua slider ke nilai default dengan satu klik

IKLAN · HAPUS?

 Tanya Jawab Umum

Apa perbedaan antara transformasi 2D dan 3D pada CSS?

Transformasi dua dimensi (2D) bekerja hanya pada sumbu X dan Y, mempengaruhi dimensi lebar dan tinggi. Mereka mencakup rotasi, skala, skew, dan translasi. Transformasi tiga dimensi (3D) menambahkan sumbu Z untuk kedalaman, memungkinkan elemen tampil seperti berputar dalam ruang tiga dimensi. Properti seperti rotateX dan rotateY menggeser elemen ke arah atau menjauhi pengamat. Transformasi 3D membutuhkan nilai perspektif pada orangtua atau elemen untuk menciptakan ilusi kedalaman. Tanpa perspektif, putaran 3D tampak datar. Keduanya transformasi dua dimensi dan tiga dimensi dapat digabungkan dalam satu properti transformasi.
Apa itu `transform-origin`? --- *(Translation of only the direct question content: "What does transform-origin do?" → "Apa itu transform-origin?")*

Pusat transform menentukan titik di sekitar mana transformasi diterapkan. Secara default, ia adalah pusat elemen (50% 50%). Mengubahnya menjadi atas kiri (0% 0%) membuat rotasi berputar dari sudut daripada pusat. Hal ini secara drastis mengubah bagaimana rotate, scale, dan skew terlihat. Misalnya, memutar 45 derajat dari pusat membuat elemen berputar di tempat, tetapi memutar dari atas kiri membuatnya seperti pintu yang berayun. Asal-usul (origin) dapat menerima kata kunci (atas, tengah, bawah, kiri, kanan), persentase, atau nilai piksel untuk kontrol yang lebih presisi.
Bagaimana cara kerja **perspective** dalam CSS?

Perspektif mendefinisikan jarak antara pengamat dan bidang Z, menciptakan ilusi kedalaman untuk transformasi 3D. Nilai yang lebih kecil seperti 200px menghasilkan perspektif ekstrim dekat yang membuat efek 3D tampak dramatis dan distorsi. Nilai yang lebih besar seperti 2000px menghasilkan perspektif jarak yang subtil dan jauh. Perspektif dapat diatur pada elemen induk sebagai properti (perspective: 800px) atau pada elemen itu sendiri melalui fungsi transformasi (transform: perspective(800px)). Metode induk lebih disarankan ketika beberapa elemen anak berbagi ruang 3D yang sama.
Apakah masih diperlukan prefiks pemasok untuk transformasi CSS?

Pada tahun **2026**, prefiks vendor untuk transformasi CSS jarang diperlukan lagi. Properti transform tanpa prefiks didukung oleh semua browser modern termasuk Chrome, Firefox, Safari, Edge, dan browser mobile. Prefiks `-webkit-transform` sebelumnya diperlukan untuk versi Safari dan iOS yang lebih lama sebelum Safari 9 (tahun **2015**). Jika Anda perlu mendukung browser yang sangat tua, generator ini dapat menambahkan prefiks vendor sebagai komentar dalam outputnya. Untuk proyek-proyek yang ditujukan pada browser saat ini, versi tanpa prefiks sudah cukup dan kode akan lebih bersih tanpa adanya prefiks tersebut.