toolsmoah

Penjana Transform

Cipta dan pratonton sifat CSS transform secara visual.

CSS Transform adalah sifat CSS yang berkuasa yang membolehkan anda mengubah unsur web dalam ruang 2D atau 3D. Melalui transformasi seperti translate, rotate, scale, dan skew, anda boleh mencipta reka bentuk web yang dinamik dan interaktif. Cipta kesan yang diingini dengan mudah dengan pratonton masa nyata.

Tetapan Transform
Laraskan setiap sifat transform
Pratonton
Semak kesan transform yang dijana
Transform
CSS yang Dijana
transform: none;
Pratetap
Cuba gaya transform yang telah ditetapkan
Rujukan Fungsi Transform

Fungsi Transform

  • • translate(x, y): translate(x, y): Gerakkan unsur mengikut jumlah x, y
  • • scale(x, y): scale(x, y): Skalakan unsur mengikut nisbah x, y
  • • rotate(angle): rotate(angle): Putarkan unsur mengikut sudut
  • • skew(x, y): skew(x, y): Condongkan unsur mengikut darjah x, y

Petua Penggunaan

  • • Beberapa fungsi transform boleh digabungkan dengan ruang
  • • Tukar asal transformasi dengan transform-origin
  • • Gunakan dengan transition untuk mencipta kesan animasi
  • • Gunakan sifat perspective untuk transform 3D
📚 Panduan Lengkap CSS Transform
Panduan terperinci untuk menguasai CSS Transform

🎯 Konsep Asas Transform

CSS Transform adalah sifat CSS yang mengubah bentuk, saiz, dan kedudukan unsur. Ia membolehkan transformasi visual unsur tanpa mengganggu aliran dokumen biasa.

Sintaks asas:

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

📐 Butiran Fungsi Transform

🔄 Translate (Pergerakan)

  • • translate(x, y): translate(x, y): Gerak sepanjang paksi X, Y
  • • translateX(x): translateX(x): Gerak sepanjang paksi X sahaja
  • • translateY(y): translateY(y): Gerak sepanjang paksi Y sahaja
  • • translate3d(x, y, z): translate3d(x, y, z): Pergerakan 3D
transform: translate(50px, 100px);

📏 Scale (Saiz Semula)

  • • scale(x, y): scale(x, y): Skalakan paksi X, Y
  • • scaleX(x): scaleX(x): Skalakan paksi X sahaja
  • • scaleY(y): scaleY(y): Skalakan paksi Y sahaja
  • • Lebih besar daripada 1 membesarkan, kurang daripada 1 mengecilkan
transform: scale(1.5, 0.8);

🔄 Rotate (Putaran)

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

📐 Skew (Ricih)

  • • skew(x, y): skew(x, y): Condong sepanjang paksi X, Y
  • • skewX(angle): skewX(angle): Condong sepanjang paksi X
  • • skewY(angle): skewY(angle): Condong sepanjang paksi Y
  • • Ubah kepada bentuk selari empat
transform: skew(15deg, 5deg);

🎨 Transform Origin (Titik Transformasi)

Sifat transform-origin menetapkan titik asal transformasi. Lalai adalah pusat unsur (50% 50%).

Menggunakan kata kunci

transform-origin: top left;

Menggunakan peratusan

transform-origin: 25% 75%;

Menggunakan piksel

transform-origin: 10px 20px;

⚡ Petua Pengoptimuman Prestasi

✅ Cadangan

  • • Animasikan hanya transform dan opacity
  • • Gunakan sifat will-change
  • • Gunakan pecutan 3D (translateZ(0))
  • • Cipta lapisan komposit untuk prestasi yang lebih baik

❌ Perkara yang Perlu Dielakkan

  • • Menganimasikan width, height
  • • Menganimasikan kedudukan left, top
  • • Transform bersarang yang berlebihan
  • • Penggunaan will-change yang tidak perlu

Contoh pengoptimuman prestasi:

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

🎬 Animasi dan Transisi

Transform boleh digunakan dengan CSS Transition dan Animation untuk mencipta kesan yang lancar.

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; }

🌐 Keserasian Pelayar

CSS Transform disokong dalam semua pelayar moden, tetapi awalan vendor mungkin diperlukan untuk pelayar 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 Sebenar

Kesan hover kad

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

Spinner pemuatan

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

Kesan masuk modal

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

Kesan klik butang

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

🔧 Alat Nyahpepijat dan Pembangunan

Alat Pembangun Pelayar

  • • Penyuntingan masa nyata dalam panel Elements
  • • Semak nilai akhir dalam tab Computed
  • • Analisis prestasi dengan tab Performance
  • • Semak struktur lapisan dengan 3D View

Sifat CSS yang Berguna

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

💡 Petua Pro

Petua Prestasi

Menggunakan transform3d() atau translateZ(0) untuk mencipta lapisan komposit untuk pecutan GPU boleh meningkatkan prestasi animasi dengan ketara.

Petua Kebolehcapaian

Gunakan pertanyaan media prefers-reduced-motion untuk menyediakan alternatif untuk pengguna yang sensitif terhadap gerakan.

Petua Reka Bentuk

Menetapkan transform-origin dengan betul boleh mencipta kesan transformasi yang lebih semula jadi.

Petua Pembangunan

Menggunakan pembolehubah CSS untuk mengawal nilai transform secara dinamik memudahkan integrasi JavaScript.

    Penjana Transform