toolsmoah

Generator Transformasi

Buat dan pratinjau properti transformasi CSS secara visual.

Transformasi CSS adalah properti CSS yang kuat yang memungkinkan Anda mengubah elemen web dalam ruang 2D atau 3D. Melalui transformasi seperti translasi, rotasi, skala, dan kemiringan, Anda dapat membuat desain web yang dinamis dan interaktif. Buat efek yang diinginkan dengan mudah dengan pratinjau real-time.

Pengaturan Transformasi
Sesuaikan setiap properti transformasi
Pratinjau
Periksa efek transformasi yang dihasilkan
Transform
CSS yang Dihasilkan
transform: none;
Preset
Coba gaya transformasi yang telah ditentukan
Referensi Fungsi Transformasi

Fungsi Transformasi

  • • translate(x, y): translate(x, y): Pindahkan elemen sebesar x, y
  • • scale(x, y): scale(x, y): Skala elemen dengan rasio x, y
  • • rotate(angle): rotate(angle): Putar elemen sebesar sudut
  • • skew(x, y): skew(x, y): Miringkan elemen sebesar derajat x, y

Kiat Penggunaan

  • • Beberapa fungsi transformasi dapat digabungkan dengan spasi
  • • Ubah asal transformasi dengan transform-origin
  • • Gunakan dengan transisi untuk membuat efek animasi
  • • Gunakan properti perspektif untuk transformasi 3D
📚 Panduan Lengkap Transformasi CSS
Panduan terperinci untuk menguasai Transformasi CSS

🎯 Konsep Dasar Transformasi

Transformasi CSS adalah properti CSS yang mengubah bentuk, ukuran, dan posisi elemen. Ini memungkinkan transformasi visual elemen tanpa mengganggu alur dokumen normal.

Sintaks dasar:

transform: function(value) function(value) ...;

📐 Detail Fungsi Transformasi

🔄 Translasi (Pergerakan)

  • • translate(x, y): translate(x, y): Bergerak di sepanjang sumbu X, Y
  • • translateX(x): translateX(x): Bergerak di sepanjang sumbu X saja
  • • translateY(y): translateY(y): Bergerak di sepanjang sumbu Y saja
  • • translate3d(x, y, z): translate3d(x, y, z): Pergerakan 3D
transform: translate(50px, 100px);

📏 Skala (Pengubahan Ukuran)

  • • scale(x, y): scale(x, y): Skala sumbu X, Y
  • • scaleX(x): scaleX(x): Skala sumbu X saja
  • • scaleY(y): scaleY(y): Skala sumbu Y saja
  • • Lebih besar dari 1 memperbesar, kurang dari 1 menyusut
transform: scale(1.5, 0.8);

🔄 Rotasi (Perputaran)

  • • rotate(angle): rotate(angle): Putar di sekitar sumbu Z
  • • rotateX(angle): rotateX(angle): Putar di sekitar sumbu X
  • • rotateY(angle): rotateY(angle): Putar di sekitar sumbu Y
  • • Gunakan unit deg, rad, turn untuk sudut
transform: rotate(45deg);

📐 Miring (Geser)

  • • skew(x, y): skew(x, y): Miring di sepanjang sumbu X, Y
  • • skewX(angle): skewX(angle): Miring di sepanjang sumbu X
  • • skewY(angle): skewY(angle): Miring di sepanjang sumbu Y
  • • Ubah menjadi bentuk jajaran genjang
transform: skew(15deg, 5deg);

🎨 Asal Transformasi (Titik Transformasi)

Properti transform-origin mengatur titik asal transformasi. Defaultnya adalah pusat elemen (50% 50%).

Menggunakan kata kunci

transform-origin: top left;

Menggunakan persentase

transform-origin: 25% 75%;

Menggunakan piksel

transform-origin: 10px 20px;

⚡ Kiat Optimasi Kinerja

✅ Rekomendasi

  • • Animasikan hanya transformasi dan opasitas
  • • Gunakan properti will-change
  • • Gunakan akselerasi 3D (translateZ(0))
  • • Buat lapisan komposit untuk kinerja yang lebih baik

❌ Hal yang Harus Dihindari

  • • Menganimasikan lebar, tinggi
  • • Menganimasikan posisi kiri, atas
  • • Penyarangan transformasi yang berlebihan
  • • Penggunaan will-change yang tidak perlu

Contoh optimasi kinerja:

.optimized {
will-change: transform;
transform: translateZ(0); /* 3D 가속 */
transition: transform 0.3s ease;
}

🎬 Animasi dan Transisi

Transformasi dapat digunakan dengan Transisi dan Animasi CSS untuk membuat efek yang mulus.

Contoh transisi

.hover-effect {
transition: transform 0.3s ease;
}
.hover-effect:hover {
transform: scale(1.1) rotate(5deg);
}

Contoh Animasi Keyframe

@keyframes bounce {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-20px); }
}
.bounce { animation: bounce 1s infinite; }

🌐 Kompatibilitas Browser

Transformasi CSS didukung di semua browser modern, tetapi awalan vendor mungkin diperlukan untuk browser yang lebih lama.

Contoh awalan vendor:

-webkit-transform: rotate(45deg); /* Safari, Chrome */
-moz-transform: rotate(45deg); /* Firefox */
-ms-transform: rotate(45deg); /* IE 9 */
transform: rotate(45deg); /* 표준 */

🎯 Contoh Penggunaan Dunia Nyata

Efek hover kartu

.card {
transition: transform 0.3s ease;
cursor: pointer;
}
.card:hover {
transform: translateY(-10px) scale(1.02);
}

Pemuat berputar

@keyframes spin {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
.spinner {
animation: spin 1s linear infinite;
}

Efek masuk modal

.modal {
transform: scale(0) rotate(180deg);
transition: transform 0.3s ease;
}
.modal.show {
transform: scale(1) rotate(0deg);
}

Efek klik tombol

.button {
transition: transform 0.1s ease;
}
.button:active {
transform: scale(0.95);
}

🔧 Alat Debugging dan Pengembangan

Alat Pengembang Browser

  • • Pengeditan real-time di panel Elemen
  • • Periksa nilai akhir di tab Terkomputasi
  • • Analisis kinerja dengan tab Kinerja
  • • Periksa struktur lapisan dengan Tampilan 3D

Properti CSS yang Berguna

  • • transform-style: preserve-3d
  • • perspective: 1000px
  • • backface-visibility: hidden
  • • will-change: transform

💡 Kiat Pro

Kiat Kinerja

Menggunakan transform3d() atau translateZ(0) untuk membuat lapisan komposit untuk akselerasi GPU dapat secara signifikan meningkatkan kinerja animasi.

Kiat Aksesibilitas

Gunakan kueri media prefers-reduced-motion untuk memberikan alternatif bagi pengguna yang sensitif terhadap gerakan.

Kiat Desain

Mengatur transform-origin dengan benar dapat menciptakan efek transformasi yang lebih alami.

Kiat Pengembangan

Menggunakan variabel CSS untuk mengontrol nilai transformasi secara dinamis membuat integrasi JavaScript lebih mudah.

    Generator Transformasi