This HTML code creates a 3D flip card that flips to reveal links on the back side when hovered over. Here’s a quick breakdown of how it works:

Code

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>3D Flip Card with Click Flip</title>
    <style>
        /* Basic styling */
        body {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
            background-color: #f0f0f0;
            font-family: Arial, sans-serif;
        }

        /* Card container */
        .flip-card {
            width: 300px;
            height: 400px;
            perspective: 1000px;
        }

        /* Flip effect */
        .flip-card-inner {
            position: relative;
            width: 100%;
            height: 100%;
            text-align: center;
            transition: transform 0.6s;
            transform-style: preserve-3d;
        }

        /* Card front and back styling */
        .flip-card-front, .flip-card-back {
            position: absolute;
            width: 100%;
            height: 100%;
            backface-visibility: hidden;
            display: flex;
            flex-direction: column;
            align-items: center;
            padding: 20px;
            border-radius: 10px;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
        }

        /* Front side with full-size background image */
        .flip-card-front {
            background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEinHkQqlrd_uwgAU2u7v7tWR3dUJJFcDrsqdpTlQQa4ckzR9i18B6K3R6dBgcRGDvBg8CGw4MWa1GUCns2giX4DNhnAd3gPG4u6oQCUoDixnrmO3zCP1WaSDlDLYdt3Ngd-SLtFi6zARewRPDe_GFT5XAb0iuauri9v1CffnLjWzJ-E3KyxB7pPzSecgmwD/s16000/20241031_134257.jpg'); /* Replace with your image URL */
            background-size: cover;
            background-position: center;
            color: white;
        }

        /* Back side with framed full-size image */
        .flip-card-back {
            background-color: #fff;
            color: #333;
            transform: rotateY(180deg);
            overflow: hidden;
            padding: 0;
            border-radius: 10px;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
        }

        /* Framed full-size image on the back side */
        .frame-image {
            width: 90%;
            height: 70%;
            margin: 15px;
            background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEinHkQqlrd_uwgAU2u7v7tWR3dUJJFcDrsqdpTlQQa4ckzR9i18B6K3R6dBgcRGDvBg8CGw4MWa1GUCns2giX4DNhnAd3gPG4u6oQCUoDixnrmO3zCP1WaSDlDLYdt3Ngd-SLtFi6zARewRPDe_GFT5XAb0iuauri9v1CffnLjWzJ-E3KyxB7pPzSecgmwD/s16000/20241031_134257.jpg'); /* Replace with your image URL */
            background-size: cover;
            background-position: center;
            border-radius: 10px;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
            cursor: pointer; /* Makes it look clickable */
        }

        /* Link options styling with two rows */
        .link-options {
            display: flex;
            flex-direction: column;
            gap: 10px;
            padding: 15px;
            width: 100%;
            box-sizing: border-box;
        }

        .link-row {
            display: flex;
            justify-content: space-around;
            gap: 10px;
        }

        .link-options a {
            color: #fff;
            padding: 10px;
            text-decoration: none;
            border-radius: 5px;
            font-weight: bold;
            transition: background-color 0.3s;
            text-align: center;
            width: 120px;
            white-space: nowrap; /* Prevents text wrapping */
        }

        .link-options .youtube { background-color: #FF0000; }
        .link-options .telegram { background-color: #0088cc; }
        .link-options .contact { background-color: #28a745; }

        .link-options a:hover {
            opacity: 0.8;
        }
    </style>
</head>
<body>

<div class="flip-card">
    <div class="flip-card-inner" id="flipCardInner">
        <!-- Front Side -->
        <div class="flip-card-front">
            <!-- The front side displays the full-size image as a background -->
        </div>
        <!-- Back Side -->
        <div class="flip-card-back">
            <!-- Framed version of the front-side image, clickable to flip back -->
            <div class="frame-image" onclick="flipToFront()"></div>
            <!-- Link options in two rows at the bottom -->
            <div class="link-options">
                <div class="link-row">
                    <a class="youtube" href="https://youtube.com/@sureshmechtech?si=liF_mFuAiqQ9Pbra" target="_blank">Mech Tech</a>
                    <a class="youtube" href="https://youtube.com/@sureshvettech?si=42nAMOz_fkBJ7jP_" target="_blank">Vet Tech</a>
                </div>
                <div class="link-row">
                    <a class="telegram" href="https://telegram.me/digitalwritersuresh" target="_blank">Telegram</a>
                    <a class="contact" href="mailto:Digitalwritersuresh@gmail.com">Contact</a>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
    // Toggle flip state for the card
    const flipCardInner = document.getElementById("flipCardInner");
    
    // Event to flip back to the front when clicking the image on the back side
    function flipToFront() {
        flipCardInner.style.transform = "rotateY(0deg)";
    }

    // Event to flip to the back when hovering over the card
    flipCardInner.addEventListener("mouseover", () => {
        flipCardInner.style.transform = "rotateY(180deg)";
    });
</script>

</body>
</html>

Code Explanation

1. HTML Structure:

The div with class flipcard contains everything related to the 3D card, setting up its dimensions and perspective.

Inside flip card inner is the container that rotates during the flip. It holds both the front and back content.

The flip card front displays a background image and serves as the front side of the card.

The flip card back contains a framed version of the front image and links for YouTube, Telegram, and contact. These links are organized in two rows using link options and link row.

2. CSS Styling:

Basic Body Styles: The page centers the card on the screen with a neutral background color and uses the Arial font.

Card and Flip Effect:

flip card sets the width, height, and 3D perspective to create depth.

flip card inner applies a transform and transition to create a smooth rotation. The transform style: preserve 3d property ensures the 3D effect is maintained during the flip.

Both flip card front and flip card back use back face visibility: hidden to hide the reverse side during the flip.

Front and Back Side Content:

The flip card front uses a background image to cover the entire side.

.flipcardback is rotated by 180 degrees initially so that it appears when the flip card inner is flipped.

The framed image on the back is styled with padding and shadow for a "frame" effect.

Links:

The links in link options have specific styles, colors, and hover effects for a buttonlike appearance.

3. JavaScript:

Functionality:

A mouseover event listener on flipCardInner triggers a 180degree rotation on hover, showing the back side.

The flipToFront() function resets the rotation when the framed image on the back side is clicked, flipping the card back to the front.

Summary

This code creates an interactive 3D flip card effect where:

Hovering over the card flips it to reveal the back side.

Clicking on the framed image flips the card back to the front.

The back side displays social and contact links in two rows, styled as buttons.

This approach is ideal for displaying basic information and links with a visually engaging effect.

"This Content Sponsored by Genreviews.Online

Genreviews.online is One of the Review Portal Site

Website Link: https://genreviews.online/

Sponsor Content: #genreviews.online, #genreviews, #productreviews, #bestreviews, #reviewportal"

This HTML code creates a 3D flip card that flips to reveal links on the back side when hovered over. Here’s a quick breakdown of how it works:

Post a Comment