U-beddelka Qaabka (Transforms)

Casharkii hore waxaan ku soo qaadanay sifooyinka u-beddelka (Transforms). Haddaba, casharkan waxaan si faahfaahsan u baran doonnaa dhammaan noocyada kala duwan ee u-beddelka: laba-jiho (2D) iyo saddex-jiho (3D) [1]. U-beddelku (Transforms) waa aalad aad u awood badan oo kuu oggolaanaysa inaad booska beddesho, wareejiso, weynayso ama yarayso, iyo iilato curiyayaasha — iyada oo aan wax saameyn ah lagu yeelanayn hannaanka socodka caadiga ah ee bogga (document flow) [1].

Mabaadi’da Aasaasiga ah ee U-beddelka (Transforms)

Sifada transform waxay qaadan kartaa hal ama dhowr hab-fulineed (functions). Nooc kasta o ka mid ah sifooyinkan wuxuu sameeyaa isbeddel muuqaaleed (visual) oo kaliya — booskii dhabta ahaa ee uu curiyuhu ku lahaa bogga isma beddelayo:

.curiye {
  transform: translateX(20px) rotate(5deg) scale(1.1);
  /* U-dhaqaajinta jihooyinka: kor → midig → iyo weyneyn */
}

Habka Dhaqaaqa — `translate()`

Habka translate() wuxuu curiyaha ka dhaqaajiyaa booskiisii asalka ahaa:

/* Labada Jiho (2D) */
.dhaqaaq-x { transform: translateX(30px); }    /* Aksiska Jiifka ah (bidix → midig) */
.dhaqaaq-y { transform: translateY(-20px); }   /* Aksiska Toosan (kor) */
.dhaqaaq-xy { transform: translate(30px, -20px); } /* Labada aksis isku mar */

/* Saddexda Jiho (3D) */
.dhaqaaq-z { transform: translateZ(50px); }
.dhaqaaq-3d { transform: translate3d(30px, -20px, 50px); }

Habka loo qoro	Jihada	Qiimaha la aqbalo
`translateX(n)`	Jiif (Horizontal)	`px`, `%`, `rem`
`translateY(n)`	Toosan (Vertical)	`px`, `%`, `rem`
`translate(x, y)`	Jiif iyo Toosan	`translate(20px, -10px)`
`translateZ(n)`	3D — Qoto-dheeraanta (Z-axis)	Wuxuu u baahan yahay sifada `perspective`
`translate3d(x,y,z)`	3D — Dhammaan jihooyinka	`translate3d(0, 0, 50px)`

Ogow: Boqolkiiba % waxay ku xiran tahay cabbirka curiyaha laftiisa, ee uma tixraacdo curiyaha sare (waalidka).

Habka Wareejinta — `rotate()`

Habka rotate() wuxuu curiyaha u wareejiyaa xagal gaar ah (degrees):

.wareejin-45 { transform: rotate(45deg); }   /* 45 digrii oo raacaysa jihada saacadda */
.wareejin-90 { transform: rotate(90deg); }
.wareejin-dib { transform: rotate(-180deg); } /* 180 digrii oo ka soo horjeedda jihada saacadda */

Wareejinta saddexda jiho (3D Rotation):

.rotate-x { transform: rotateX(45deg); } /* Wareejinta agagaarka xariiqda X (kor iyo hoos) */
.rotate-y { transform: rotateY(180deg); } /* Wareejinta agagaarka xariiqda Y (bidix iyo midig) — u rogidda kaadhka */
.rotate-z { transform: rotateZ(45deg); } /* La mid ah habka caadiga ah ee `rotate()` */

Habka	Sharaxaadda	Tusaale
`rotate(n)`	Wareejinta labada jiho (2D)	`rotate(45deg)`
`rotateX(n)`	Wareejinta agagaarka xariiqda X	`rotateX(180deg)` → Gebi ahaanba u rogid dusha sare
`rotateY(n)`	Wareejinta agagaarka xariiqda Y	`rotateY(180deg)` → Kaadh rogid
`rotateZ(n)`	Wareejinta agagaarka xariiqda Z	`rotateZ(90deg)`

Habka Weyneynta iyo Yaraynta — `scale()`

Habka scale() wuxuu beddelaa cabbirka (size) curiyaha:

.weyneyn { transform: scale(1.5); }       /* 1.5 jeer ka weyn (50% koror) */
.yarayn  { transform: scale(0.75); }      /* 0.75 oo ah cabbirka asalka ah (25% hoos u dhac) */
.weyneyn-x { transform: scaleX(2); }      /* Laba jeer ka ballaran */
.weyneyn-y { transform: scaleY(0.5); }    /* Kala-bar dhererka */

Habka	Sharaxaadda
`scale(n)`	Isku mid labada jiho — `scale(2)` waxay la dhigan tahay 2 jeer ka weyn
`scaleX(n)`	Beddelka ballaca oo kaliya
`scaleY(n)`	Beddelka dhererka oo kaliya
`scale(x, y)`	Qiimo u gaar ah ballaca iyo dhererka labadaba

Habka Iilashada — `skew()`

Habka skew() wuxuu curiyaha u iilaa dhinac gaar ah (isagoo ka dhigaya qaabka barbar-socodka ama parallelogram-ka):

.iilasho-x   { transform: skewX(10deg); }  /* In loo iilo jihada jiifta */
.iilasho-y   { transform: skewY(10deg); }  /* In loo iilo jihada toosan */
.iilasho-xy  { transform: skew(10deg, 5deg); } /* Iilasho labada jiho ah */

Habka	Sharaxaadda
`skewX(n)`	Iilashada jihada jiifta
`skewY(n)`	Iilashada jihada toosan
`skew(x, y)`	Iilashada labada jiho isku mar

Xuddunta U-beddelka — `transform-origin`

Sifada transform-origin waxay beddeshaa xuddunta ama barta dhexe ee uu u-beddelku (transform) ka bilaabanayo:

.kaadhka {
  transform-origin: center;      /* Dhexda (caadiga ah) */
  transform-origin: top left;    /* Geeska bidix ee sare */
  transform-origin: 0 100%;      /* Geeska bidix ee hoose (adoo adeegsanaya px ama %) */
  transform-origin: 50% 100%;    /* Barta dhexe ee hoose */
}

/* Tusaale: Wareejin laga bilaabay geeska gaarka ah: */
.kaadhka:hover {
  transform: rotate(5deg);
}

Habka Matrix — `matrix()`

Habka matrix() waa hab xisaabeed lagu soo koobi karo dhammaan isbeddellada labada jiho (2D) hal xariiq oo qura:

/* matrix(scaleX, skewY, skewX, scaleY, translateX, translateY) */
.curiye {
  transform: matrix(1, 0, 0, 1, 20, 10);
  /* = translate(20px, 10px) iyadoon la beddelin scale iyo skew */
}

Inta badan dadku uma baahdaan inay si toos ah u qoraan matrix(), laakiin waxaa wanaagsan inaad ogaato inuu jiro nidaamkaas.

U-beddelka Saddexda Jiho (3D Transforms) iyo Muuqaalka `perspective`

Si ay u shaqeeyaan isbeddellada saddexda jiho (3D transforms), waxaad daruuri u baahan tahay sifo go’aamisa fogaanta indhaha ama muuqaalka (perspective):

/* Sifada lagu qorayo curiyaha sare (waalidka) — si carruurta oo dhan u yeeshaan muuqaal 3D ah: */
.weelka {
  perspective: 1000px;
}

/* Ama lagu qororo curiyaha laftiisa: */
.curiye {
  transform: perspective(1000px) rotateY(45deg);
}

Card Flip — Tusaale Waaryci ah oo ku saabsan 3D kaadh-rogista

.kaadhka-weelka {
  perspective: 1000px;
}

.kaadhka-gudaha {
  width: 100%;
  height: 100%;
  transition: transform 0.6s;
  transform-style: preserve-3d;
}

.kaadhka-weelka:hover .kaadhka-gudaha {
  transform: rotateY(180deg);
}

.kaadhka-hore,
.kaadhka-dib {
  position: absolute;
  inset: 0;
  backface-visibility: hidden;
}

.kaadhka-dib {
  transform: rotateY(180deg);
}

Sifada 3D	Sharaxaadda
`perspective`	Fogaanta qiyaasta ah ee u dhaxaysa isha akhristaha iyo curiyaha
`transform-style: preserve-3d`	In la oggolaado in curiyayaasha carruurta ahi ay ku dhex jiraan booska 3D
`backface-visibility: hidden`	In la qariyo dhabarka curiyaha marka la rogo (backface-visibility)
`rotateY(180deg)`	U rogidda 180 digrii si gebi ahaanba dhabarku u soo muuqdo

Isku-darka dhowr `transform` isla markaana hal mar ah

Waxaad isku dari kartaa dhowr transform hal mar:

.kaadhka:hover {
  transform: translateY(-12px) scale(1.03) rotate(-1deg);
  /* U-dhaqaajin kor ah + weyneyn + iyo wareejin yar */
}

Ogow: Kala-horreynta qoraalku aad bay muhiim u tahay — isbeddel kasta waxaa laga xisaabiyaa kan ka horreeyay. Haddii aad qorto translate() ka dib rotate(), curiyuhu wuxuu u dhaqaaqi doonaa jihada cusub ee wareegtay.

Tusaale Mashruuc Dhamaystiran oo ku saabsan Transforms

<!DOCTYPE html>
<html lang="so">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>CSS Transforms — Gallery &amp; 3D Flip</title>
  <style>
    * { box-sizing: border-box; margin: 0; padding: 0; }
    body {
      font-family: system-ui, sans-serif;
      background: #f8fafc;
      padding: 40px 20px;
      color: #0f172a;
    }

    .cinwaan {
      text-align: center;
      margin-bottom: 40px;
    }
    .cinwaan h1 { font-size: 2rem; }
    .cinwaan p { color: #64748b; margin-top: 8px; }

    /* 3D Card Flip */
    .flip-weelka {
      perspective: 1000px;
      width: 260px;
      height: 340px;
      margin: 0 auto 48px;
    }

    .flip-gudaha {
      position: relative;
      width: 100%;
      height: 100%;
      transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
      transform-style: preserve-3d;
    }

    .flip-weelka:hover .flip-gudaha {
      transform: rotateY(180deg);
    }

    .flip-hore, .flip-dib {
      position: absolute;
      inset: 0;
      backface-visibility: hidden;
      border-radius: 16px;
      padding: 28px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      text-align: center;
    }

    .flip-hore {
      background: linear-gradient(135deg, #3b82f6, #8b5cf6);
      color: white;
    }
    .flip-hore .icon { font-size: 3rem; margin-bottom: 16px; }
    .flip-hore h2 { font-size: 1.25rem; }

    .flip-dib {
      background: white;
      border: 2px solid #e2e8f0;
      transform: rotateY(180deg);
    }
    .flip-dib p { color: #64748b; line-height: 1.6; font-size: 0.9rem; }
    .flip-dib .btn {
      margin-top: 16px;
      padding: 10px 24px;
      background: #3b82f6;
      color: white;
      border: none;
      border-radius: 99px;
      cursor: pointer;
      font-weight: 600;
      transition: transform 0.2s;
    }
    .flip-dib .btn:hover { transform: scale(1.05); }

    /* Galleriga sawirrada oo leh weyneyn (scale zoom) */
    .gallery-h2 {
      text-align: center;
      font-size: 1.5rem;
      margin-bottom: 24px;
    }

    .gallery {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
      gap: 16px;
      max-width: 900px;
      margin: 0 auto 48px;
    }

    .gallery-item {
      position: relative;
      border-radius: 14px;
      overflow: hidden;
      aspect-ratio: 1;
      background: #e2e8f0;
      cursor: pointer;
    }
    .gallery-item img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      transition: transform 0.4s ease;
    }
    .gallery-item:hover img {
      transform: scale(1.15);
    }
    .gallery-item .overlay {
      position: absolute;
      inset: 0;
      background: rgba(15, 23, 42, 0.6);
      display: flex;
      align-items: center;
      justify-content: center;
      color: white;
      font-weight: 600;
      opacity: 0;
      transition: opacity 0.3s ease;
    }
    .gallery-item:hover .overlay {
      opacity: 1;
    }

    /* Muujinta astaamaha is-wareejiya (Rotating icons) */
    .icons {
      display: flex;
      gap: 24px;
      justify-content: center;
      margin-bottom: 40px;
      flex-wrap: wrap;
    }
    .icon-box {
      width: 72px;
      height: 72px;
      background: white;
      border-radius: 16px;
      border: 1px solid #e2e8f0;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 1.75rem;
      transition: transform 0.4s ease;
    }
    .icon-box:hover {
      transform: rotate(360deg) scale(1.1);
    }
    .icon-box.skew:hover {
      transform: skewX(-10deg) scale(1.1);
    }
    .icon-box.translate:hover {
      transform: translateY(-8px) scale(1.15);
    }

    /* Faahfaahinta mabaadi'da */
    .sharax {
      max-width: 700px;
      margin: 0 auto 24px;
      text-align: center;
      color: #64748b;
      line-height: 1.7;
    }
    .sharax strong { color: #0f172a; }

    /* Kaadhadhka tijaabada */
    .transform-cards {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
      gap: 16px;
      max-width: 800px;
      margin: 0 auto 48px;
    }
    .t-card {
      background: white;
      border: 1px solid #e2e8f0;
      border-radius: 12px;
      padding: 20px;
      text-align: center;
      font-size: 0.85rem;
      transition: transform 0.3s;
    }
    .t-card code { display: block; margin-bottom: 6px; font-size: 0.75rem; color: #64748b; }
    .t-card:hover { box-shadow: 0 8px 24px rgba(0,0,0,0.06); }

    .t-card.translate:hover { transform: translateX(8px); }
    .t-card.rotate:hover { transform: rotate(5deg); }
    .t-card.scale:hover { transform: scale(1.08); }
    .t-card.skew:hover { transform: skewY(2deg); }
    .t-card.multi:hover { transform: translateY(-6px) scale(1.03) rotate(-1deg); }
  </style>
</head>
<body>

  <div class="cinwaan">
    <h1>CSS Transforms</h1>
    <p>translate · rotate · scale · skew · 3D</p>
  </div>

  <!-- 3D Card Flip -->
  <div class="flip-weelka">
    <div class="flip-gudaha">
      <div class="flip-hore">
        <div class="icon">✦</div>
        <h2>Guji si aad u Rogto</h2>
      </div>
      <div class="flip-dib">
        <p>Kani waa 3D card flip!<br> Waxaa lagu sameeyay <code>transform: rotateY(180deg)</code> iyo <code>backface-visibility: hidden</code>.</p>
        <button class="btn">Akhri Faahfaahin</button>
      </div>
    </div>
  </div>

  <!-- Rotating Icons -->
  <div class="icons">
    <div class="icon-box">🌀</div>
    <div class="icon-box skew">🎯</div>
    <div class="icon-box translate">🚀</div>
    <div class="icon-box" style="transition-duration:1.2s;">🌿</div>
  </div>

  <!-- Transform types demo -->
  <div class="transform-cards">
    <div class="t-card translate"><code>translateX(8px)</code> <strong>Dhaqaaq</strong></div>
    <div class="t-card rotate"><code>rotate(5deg)</code> <strong>Wareejin</strong></div>
    <div class="t-card scale"><code>scale(1.08)</code> <strong>Weyneyn</strong></div>
    <div class="t-card skew"><code>skewY(2deg)</code> <strong>Iilasho</strong></div>
    <div class="t-card multi"><code>translate + scale + rotate</code> <strong>Isku-dar</strong></div>
  </div>

  <!-- Image Gallery -->
  <h2 class="gallery-h2">Galeriya — Scale Zoom</h2>
  <div class="gallery">
    <div class="gallery-item">
      <div style="background:#3b82f6; width:100%; height:100%; display:flex; align-items:center; justify-content:center; font-size:3rem; color:white;">🌄</div>
      <div class="overlay">Daawo</div>
    </div>
    <div class="gallery-item">
      <div style="background:#8b5cf6; width:100%; height:100%; display:flex; align-items:center; justify-content:center; font-size:3rem; color:white;">🏖️</div>
      <div class="overlay">Daawo</div>
    </div>
    <div class="gallery-item">
      <div style="background:#22c55e; width:100%; height:100%; display:flex; align-items:center; justify-content:center; font-size:3rem; color:white;">🏔️</div>
      <div class="overlay">Daawo</div>
    </div>
    <div class="gallery-item">
      <div style="background:#ef4444; width:100%; height:100%; display:flex; align-items:center; justify-content:center; font-size:3rem; color:white;">🌃</div>
      <div class="overlay">Daawo</div>
    </div>
  </div>

  <p class="sharax">
    <strong>Transform-origin:</strong> Xuddunta transform-ka waxay tahay <code>center</code> (caadiga ah).<br>
    <strong>Perspective:</strong> 3D transforms waxay u baahan yihiin <code>perspective</code> si ay u shaqeeyaan.
  </p>

</body>
</html>

Casharka xiga: Waxaan ku baran doonaa Sida loo sameeyo Hadhka iyo Shaashka (Shadows & Filters) ee CSS.

Mabaadi’da Aasaasiga ah ee U-beddelka (Transforms)

Habka Dhaqaaqa — translate()

Habka Wareejinta — rotate()

Habka Weyneynta iyo Yaraynta — scale()

Habka Iilashada — skew()

Xuddunta U-beddelka — transform-origin

Habka Matrix — matrix()

U-beddelka Saddexda Jiho (3D Transforms) iyo Muuqaalka perspective