Generator CSS Transform
Buat nilai CSS transform: translate, rotate, scale, skew ditambah perspective 3D, rotateX/rotateY, dan translateZ, dengan transform-origin dan pratinjau langsung.
Preset
Transformasi 2D
Transformasi 3D
Perspektif 0 berarti tanpa perspektif. Rotasi 3D tampak datar tanpa perspektif.
Titik asal transformasi
Pratinjau
Garis putus-putus menunjukkan elemen sebelum ditransformasi; titik merah adalah titik asal transformasi.
transform: none;
Alat Terkait
Lihat SemuaApa itu Generator CSS Transform?
Menggabungkan fungsi CSS transform dengan slider: translate, rotate, scale, dan skew 2D, serta perspective, rotateX, rotateY, dan translateZ 3D. Garis putus-putus di pratinjau menunjukkan posisi asli dan titik merah menandai titik asal transformasi.
Cara menggunakan Generator CSS Transform
- Pilih preset (Miring 3D, Balik, Miring, Perbesar, Kartu 3D) atau mulai dari Tanpa.
- Sesuaikan Geser X/Y, Putar, Skala X/Y, dan Kemiringan X/Y di Transformasi 2D.
- Atur Perspektif, Putar X, Putar Y, dan Geser Z di Transformasi 3D.
- Pilih Titik asal transformasi dari daftar atau atur Posisi X/Y.
- Salin kode CSS-nya.
Contoh
Move X 20px, Rotate 45°, Scale X 1.5, Scale Y 1.5
transform: translate(20px, 0) rotate(45deg) scale(1.5);
Kapan menggunakan Generator CSS Transform
Gunakan untuk efek hover, kartu yang berbalik, tampilan 3D miring, dan offset posisi yang presisi. Transform tidak memengaruhi tata letak (elemen di sekitarnya tidak bergeser); untuk mengubah tata letak, gunakan margin, flexbox, atau grid. Kombinasikan dengan Generator CSS Animation untuk menganimasikan perpindahan antar-transform.
Cara kerja Generator CSS Transform
Fungsi hanya ditulis jika tidak netral, dalam urutan ini: perspective(), translate(), translateZ(), rotateX(), rotateY(), rotate(), scale(), skew(). Transformasi diterapkan dari kanan ke kiri relatif terhadap elemen, sehingga urutan mengubah hasil; perspective() harus berada paling depan agar memengaruhi fungsi 3D sesudahnya. Skala X/Y yang sama ditulis sebagai satu scale(n). transform-origin hanya ditulis jika berbeda dari pusat default (50% 50%).
Kasus Penggunaan Umum
- Kartu produk miring 3D
- Efek kartu berbalik dengan rotateY(180deg)
- Zoom saat hover pada gambar
- Label section miring dengan skew
- Trik pemusatan dengan translate(-50%, -50%)
Pertanyaan Umum
Apa bedanya perspective() dan properti perspective?
perspective() di dalam transform hanya berlaku untuk elemen itu. Properti perspective pada elemen induk membuat ruang 3D bersama untuk semua anaknya.
Mengapa rotasi 3D saya terlihat datar?
Tanpa perspektif tidak ada efek kedalaman. Atur Perspektif ke nilai seperti 800px.
Apakah transform memengaruhi tata letak?
Tidak. Elemen tetap menempati ruang aslinya dalam tata letak; hanya tampilannya yang digeser, diputar, atau diskalakan.