CSS দিয়ে Flip Out Y অ্যানিমেশন ইফেক্ট তৈরি করা

ওভারভিউ

Flip Out Y অ্যানিমেশন একটি 3D ফ্লিপ ইফেক্ট যা এলিমেন্টকে Y-অক্ষ (ভার্টিক্যাল অক্ষ) চারদিকে ঘুরিয়ে লুকিয়ে দেয়। এটি CSS @keyframes এবং transform: perspective() rotateY() ব্যবহার করে তৈরি করা হয়।

কোড উদাহরণ

<html>
<head>
<style>
    .animated {
        background-image: url(/css/images/logo.png);
        background-repeat: no-repeat;
        background-position: left top;
        padding-top: 95px;
        margin-bottom: 60px;
        -webkit-animation-duration: 1s;
        animation-duration: 1s;
        -webkit-animation-fill-mode: both;
        animation-fill-mode: both;
    }
    
    @-webkit-keyframes flipOutY {
        0% {
            -webkit-transform: perspective(400px) rotateY(0deg);
            opacity: 1;
        }
        100% {
            -webkit-transform: perspective(400px) rotateY(90deg);
            opacity: 0;
        }
    }
    
    @keyframes flipOutY {
        0% {
            transform: perspective(400px) rotateY(0deg);
            opacity: 1;
        }
        100% {
            transform: perspective(400px) rotateY(90deg);
            opacity: 0;
        }
    }
    
    .flipOutY {
        -webkit-backface-visibility: visible !important;
        -webkit-animation-name: flipOutY;
        backface-visibility: visible !important;
        animation-name: flipOutY;
    }
</style>
</head>
<body>
    <div id="animated-example" class="animated flipOutY"></div>
    <button onclick="myFunction()">Reload page</button>
    <script>
        function myFunction() { location.reload(); }
    </script>
</body>
</html>

কোড ব্যাখ্যা

আধুনিক উন্নত সংস্করণ

<!DOCTYPE html>
<html>
<head>
<style>
    .card {
        width: 200px; height: 200px;
        background: linear-gradient(45deg, #667eea, #764ba2);
        border-radius: 12px;
        display: flex; align-items: center; justify-content: center;
        color: white; font-size: 24px; font-weight: bold;
        cursor: pointer;
        perspective: 1000px;
    }
    
    .card.flip-out-y {
        animation: flipOutY 0.8s cubic-bezier(0.4, 0, 0.2, 1) forwards;
        transform-style: preserve-3d;
    }
    
    @keyframes flipOutY {
        0% {
            transform: perspective(400px) rotateY(0deg);
            opacity: 1;
        }
        100% {
            transform: perspective(400px) rotateY(90deg);
            opacity: 0;
        }
    }
    
    /* রি-ট্রিগার করার জন্য বাটন */
    button { margin-top: 20px; padding: 10px 20px; font-size: 16px; }
</style>
</head>
<body>
    <div class="card" id="card">Flip Me!</div>
    <button onclick="restart()">Restart Animation</button>
    
    <script>
        const card = document.getElementById('card');
        function restart() {
            card.classList.remove('flip-out-y');
            // Reflow ফোর্স করুন
            void card.offsetWidth;
            card.classList.add('flip-outY');
        }
    </script>
</body>
</html>

সম্পর্কিত অ্যানিমেশন (Animate.css লাইব্রেরি থেকে)

• flipInY - বিপরীত: ৯০° থেকে ০° (দেখানো)
• flipOutX - X-অক্ষ (হরিজন্টাল) চারদিকে ফ্লিপ আউট
• flipInX - X-অক্ষ থেকে ফ্লিপ ইন

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

• কার্ড/মডাল বন্ধ করার অ্যানিমেশন
• নোটিফিকেশন ডিসমিস
• পেজ ট্রানজিশন (স্লাইড আউট)
• গেমে কার্ড ফ্লিপ

সতর্কতা

• backface-visibility: visible পারফরম্যান্স কমাতে পারে (দুই পাশ রেন্ডার)۔
• পারফরম্যান্সের জন্য will-change: transform, opacity যোগ করুন।
• রিডিউসড মোশন (Reduced Motion) পছন্দকারী ব্যবহারকারীদের জন্য @media (prefers-reduced-motion: reduce) এ অ্যানিমেশন বন্ধ করুন।

Accessibility (অ্যাক্সেসিবিলিটি)

@media (prefers-reduced-motion: reduce) {
    .flipOutY {
        animation: none !important;
        opacity: 0;
    }
}