I try to rotate an image whole circle in 1 direction infinitly with 360deg but it is rotating only half circle and back infinitly?

[johannes999]

hello,

I want the image to rotate 360 degree and stay circling in 1 direction infinitly. I used css keyframes but it is  is rotating only half circle and then rotating back to it position infinitly ,I want that it rotates whole circle and stay rotaing whole circle in 1 direction only infinitly.  I tried to solve it with javascript but the problem is teh same . I isolated every html and css code but the problem is the same .

this is the html code:

<div class="header-section2"> 
            <img id="rotating-image" src="https://laptopdiscounthub.com/wp-content/uploads/2024/05/hero-image1-e1719849650769.webp" alt="Laptop Deals">
        </div>
and this is css code:
.header-section2 {
            display: flex;
            width: 33.333%;
            perspective: 1000px;
            overflow: hidden;
        }

        .header-section2 img {
            margin-top: 10px;
            position: relative;
            transform-origin: center;
        }
        and this is javascript code:
 <script>
        // JavaScript code to rotate the image continuously in one direction around the Y-axis
        let angle = 0;
        const image = document.getElementById('rotating-image');

        function rotateImage() {
            angle += 1; // Increment angle continuously
            image.style.transform = `rotateY(${angle}deg)`;
            requestAnimationFrame(rotateImage);
        }

        rotateImage();
    </script>

I tried before javascript this html and css code :

this is html code:
<div class="header-section2">
    <img src="https://laptopdiscounthub.com/wp-content/uploads/2024/05/hero-image1-e1719849650769.webp" alt="Laptop Deals">
</div>
and this is css:
.header-section2 {
    display: flex;
    width: 33.333%;
    perspective: 1000px;
    overflow: hidden;
}

.header-section2 img {
    margin-top: 10px;
    position: relative;
    animation: rotateImage 10s linear infinite; /* Applying the animation */
}

@keyframes rotateImage {
    from {
        transform: rotateY(0deg);
    }
    to {
        transform: rotateY(360deg);
    }
}

but the problem is  the same with keyframes and javascript .  can some one tell me where is the problem because rotate 360deg is not working and only using in keyframes (rotate whitout Y is not working either ).https://laptopdiscounthub.com/

any advise is welcome.

thanks

[Ingolme]

It is working correctly, but the fact that the laptop is already at an angle in the photo causes an optical illusion. It's known as Ames window: https://en.wikipedia.org/wiki/Ames_window

The rotation would look correct if the laptop was seen from straight ahead.

[johannes999]

thanks ,

I see in Ames_window why?

I used the iamge in 2 classes and it is now much beter!

 <div class="header-section2"> 
            <div class="rotating-container">
        <img id="rotating-image-front" class="rotating-image" src="https://laptopdiscounthub.com/wp-content/uploads/2024/05/hero-image1-e1719849650769.webp" alt="Laptop Deals Front">
        <img id="rotating-image-back" class="rotating-image" src="https://laptopdiscounthub.com/wp-content/uploads/2024/05/hero-image1-e1719849650769.webp" alt="Laptop Deals Back">
    </div> 
        </div>
css:

.header-section2 {
    display: flex;
    width: 30%;
    perspective: 1000px;
    overflow: hidden;
}

.rotating-container {
    position: relative;
    width: 100%;
}

.rotating-image {
    position: absolute;
    top: 10px;
    left: 0;
    width: 60%;
    transform-origin: center;
  backface-visibility: hidden;           /* Ensure only the front face is visible */
}

#rotating-image-front {
	transform: rotateY(180deg);
    animation: rotate-front 6s linear infinite;
}

#rotating-image-back {
    transform: rotateY(360deg);
    animation: rotate-back 6s linear infinite;
}

@keyframes rotate-front {
    0% {
        transform: rotateY(0deg);
    }
    50% {
        transform: rotateY(180deg);
    }
    100% {
        transform: rotateY(360deg);
    }
}

@keyframes rotate-back {
    0% {
        transform: rotateY(180deg);
    }
    50% {
        transform: rotateY(360deg);
    }
    100% {
        transform: rotateY(540deg); /* 180deg + 360deg */
    }
}

thank you again