CSS দিয়ে Flip ইফেক্ট (হরিজন্টাল ও ভার্টিক্যাল মিরর)

ওভারভিউ

Flip ইফেক্ট একটি এলিমেন্টের মিরর ইমেজ (Mirror Image) তৈরি করে। এটি লিগ্যাসি Internet Explorer-এর প্রоприেটারি filter প্রোপার্টির FlipH (হরিজন্টাল) এবং FlipV (ভার্টিক্যাল) মান দিয়ে করা হত। আধুনিক CSS-এ transform: scaleX(-1) এবং scaleY(-1) ব্যবহার করা হয়।

লিগ্যাসি প্যারামিটার (IE Only)

লিগ্যাসি উদাহরণ (IE Only)

<html>
<head></head>
<body>
    <img src="/css/images/logo.png" alt="CSS Logo" style="filter: FlipH">
    <img src="/css/images/logo.png" alt="CSS Logo" style="filter: FlipV">
    <p>Text Example:</p>
    <div style="width: 300px; height: 50px; font-size: 30pt; font-family: Arial Black; color: red; filter: FlipV">
        CSS Tutorials
    </div>
</body>
</html>

আধুনিক CSS পদ্ধতি (সর্ব ব্রাউজার)

১. Horizontal Flip (বাম-ডান উল্টা)

.flip-horizontal {
    transform: scaleX(-1);
    /* বা */
    transform: rotateY(180deg);
}

২. Vertical Flip (উপর-নিচ উল্টা)

.flip-vertical {
    transform: scaleY(-1);
    /* বা */
    transform: rotateX(180deg);
}

৩. উভয় (১৮০° ঘোরানো)

.flip-both {
    transform: scale(-1, -1); /* বা rotate(180deg) */
}

পূর্ণ উদাহরণ (আধুনিক)

<!DOCTYPE html>
<html>
<head>
<style>
    .demo-img { width: 200px; transition: transform 0.5s ease; display: block; margin: 10px; }
    .flip-h:hover { transform: scaleX(-1); }
    .flip-v:hover { transform: scaleY(-1); }
    .flip-both:hover { transform: scale(-1, -1); }
    
    .text-flip { 
        display: inline-block; 
        font-family: Arial Black; 
        font-size: 24px; 
        color: #333; 
        transition: transform 0.5s; 
    }
    .text-flip.h:hover { transform: scaleX(-1); }
    .text-flip.v:hover { transform: scaleY(-1); }
</style>
</head>
<body>
    <h2>Flip Effect Demo (Modern CSS)</h2>
    
    <img src="logo.png" alt="Normal" class="demo-img">
    <img src="logo.png" alt="Horizontal Flip" class="demo-img flip-h">
    <img src="logo.png" alt="Vertical Flip" class="demo-img flip-v">
    
    <p>Text Flip:</p>
    <div class="text-flip h">Horizontal Flip (Hover)</div>
    <div class="text-flip v">Vertical Flip (Hover)</div>
</body>
</html>

ট্রান্সফরম অরিজিন (Transform Origin)

ডিফল্টভাবে এলিমেন্টের কেন্দ্র বিন্দু 중심으로 ফ্লিপ হয়। প্রান্ত থেকে ফ্লিপ করতে:

.flip-left-edge {
    transform-origin: left center;
    transform: scaleX(-1);
}
.flip-top-edge {
    transform-origin: center top;
    transform: scaleY(-1);
}

3D ফ্লিপ (Card Flip এনিমেশন)

.card {
    width: 200px; height: 300px;
    perspective: 1000px;
    position: relative;
    transform-style: preserve-3d;
    transition: transform 0.6s;
}
.card.flipped { transform: rotateY(180deg); }

.card-face {
    position: absolute; width: 100%; height: 100%;
    backface-visibility: hidden; /* পেছনের ফেস লুকান */
}
.card-back { transform: rotateY(180deg); }

ব্রাউজার সাপোর্ট

• transform: scaleX/Y(-1): সব আধুনিক ব্রাউজার (IE9+)
• 3D ট্রান্সফরম: IE10+, সব আধুনিক ব্রাউজার
• লিগ্যাসি filter: FlipH/FlipV: শুধু IE 4-9

ব্যবহারের ক্ষেত্র

• কার্ড ফ্লিপ অ্যানিমেশন (মেমরি গেম, প্রোফাইল কার্ড)
• RTL ভাষা সাপোর্টে আইকন ফ্লিপ
• ক্রিয়েটিভ হোভার ইফেক্ট
• প্রিন্ট লেআউটে মিররিং

সতর্কতা

• transform লেআউট ফ্লো পরিবর্তন করে না (স্পেস একই থাকে)।
• টেক্সট ফ্লিপ করলে পড়া যাবে না (মিররড) - শুধু ডেকোরেটিভ ব্যবহারের জন্য।
• backface-visibility: hidden 3D ফ্লিপে পেছনের সাইড লুকাতে ব্যবহার করুন।