FlipY element with logo swap - Html

FrancisPhant0m
February 21, 2023
188 views
0 votes
2 Answers

so I’ve been playing around with CSS for quite some time now but I face a challenge that I can’t quite solve:
I have 2 logos that I need to animate. The animation has to basically be a 2-way flipY that makes one logo rotate along the Y axis and when at 180 degrees the logo has to be swapped to the 2nd logo thats positioned at 180 degrees too and rotates towards logo’s 1 first position (from 180 to 360 degrees) and then pauses. I tried doing my best but failed miserably.

 .logo1,
        .logo2 {
            position: absolute;
            top: 0;
            left: 0;
            width: 25vw;
            height: auto;
            transform-origin: center;
            opacity: 0;
        }

        .logo1 {
            animation: rotate1 4s linear infinite;
            opacity: 1;
        }

        .logo2 {
            animation: rotate2 4s linear infinite;
        }

        @keyframes rotate1 {
            0% {
                transform: rotateY(0deg);
            }

            50% {
                transform: rotateY(180deg);
            }

            100% {
                transform: rotateY(180deg);
            }
        }

        @keyframes rotate2 {
            0% {
                transform: rotateY(180deg);
            }

            50% {
                transform: rotateY(360deg);
            }

            53% {
                transform: rotateY(360deg);
                opacity: 0;
            }

            56% {
                opacity: 1;
            }

            100% {
                transform: rotateY(360deg);
            }
        }

        /* Swap logo 1 and logo 2 at 50% of the animation */
        .logo1 {
            animation-name: swap1;
            animation-duration: 8s;
        }

        .logo2 {
            animation-name: swap2;
            animation-duration: 8s;
            animation-delay: 4s;
        }

        @keyframes swap1 {
            0% {
                transform: rotateY(0deg);
                opacity: 1;
            }

            50% {
                transform: rotateY(180deg);
                opacity: 0;
            }

            51% {
                opacity: 0;
            }

            53% {
                opacity: 1;
            }

            100% {
                transform: rotateY(180deg);
                opacity: 1;
            }
        }

        @keyframes swap2 {
            0% {
                transform: rotateY(180deg);
                opacity: 0;
            }

            50% {
                transform: rotateY(360deg);
                opacity: 0;
            }

            53% {
                opacity: 1;
            }

            56% {
                opacity: 0;
            }

            100% {
                transform: rotateY(360deg);
                opacity: 0;
            }
        }

    <div class="logo-container">
        <img class="logo1" src="/logo1.png">
        <img class="logo2" src="/logo2.png">
    </div>

Tags: css html

Answers

Chosen as BEST ANSWER

Working snippet:

<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title>XD</title>

<style>
    body {

        background-color: black;
    }
    .logo-container {
        position: relative;
    }

    .logo1,
    .logo2 {
        position: absolute;
        top: 0;
        left: 0;
        width: 50vw;
        height: 100px;
        transform-origin: center;
        opacity: 0;
    }

    .logo1 {
        animation: rotate1 4s linear infinite;
        opacity: 1;
    }

    .logo2 {
        animation: rotate2 4s linear infinite;
    }

    @keyframes rotate1 {
        0% {
            transform: rotateY(0deg);
        }

        50% {
            transform: rotateY(180deg);
        }

        100% {
            transform: rotateY(180deg);
        }
    }

    @keyframes rotate2 {
        0% {
            transform: rotateY(180deg);
        }

        50% {
            transform: rotateY(360deg);
        }

        53% {
            transform: rotateY(360deg);
            opacity: 0;
        }

        56% {
            opacity: 1;
        }

        100% {
            transform: rotateY(360deg);
        }
    }

    /* Swap logo 1 and logo 2 at 50% of the animation */
    .logo1 {
        animation-name: swap1;
        animation-duration: 8s;
    }

    .logo2 {
        animation-name: swap2;
        animation-duration: 8s;
        animation-delay: 4s;
    }

    @keyframes swap1 {
        0% {
            transform: rotateY(0deg);
            opacity: 1;
        }

        50% {
            transform: rotateY(180deg);
            opacity: 0;
        }

        51% {
            opacity: 0;
        }

        53% {
            opacity: 1;
        }

        100% {
            transform: rotateY(180deg);
            opacity: 1;
        }
    }

    @keyframes swap2 {
        0% {
            transform: rotateY(180deg);
            opacity: 0;
        }

        50% {
            transform: rotateY(360deg);
            opacity: 0;
        }

        53% {
            opacity: 1;
        }

        56% {
            opacity: 0;
        }

        100% {
            transform: rotateY(360deg);
            opacity: 0;
        }
    }
</style>
</head>
<body>

<div class="logo-container">
    <img class="logo1" src="https://logosbynick.com/wp-content/uploads/2018/03/final-logo-example.png">
    <img class="logo2" src="https://visme.co/blog/wp-content/uploads/2017/08/40-Creative-Logo-Designs-to-Inspire-You-Movers-logo.jpg">
</div>


</body>
</html>

(Edit)

This should work (don’t forget to put two logos in a root folder):

HTML:

<div class="wrapper">
    <img src="logo1.png">
    <img src="logo2.png">
</div>

CSS:

.wrapper {
    width: 200px;
    height: 200px;
    position: relative;
    perspective: 1000px;
}

.wrapper img {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    backface-visibility: hidden;
    transform-style: preserve-3d;
    transition: transform 1s ease-in-out;
}

.wrapper img:nth-child(2) {
    transform: rotateY(180deg);
}

.wrapper:hover img:first-child {
    transform: rotateY(180deg);
}

.wrapper:hover img:last-child {
    transform: rotateY(360deg);
}

Please signup or login to give your own answer.

Click here to cancel reply.

FlipY element with logo swap – Html

Answers