the image is not turning 360 deg with keyframes?

  • Resolved johannes999

    (@johannes999)


    4 months, 2 weeks ago

    hello,

    this is my html code:

                   <img src="https://laptopdiscounthub.com/wp-content/uploads/2024/05/hero-image1-e1719849650769.webp" alt="Laptop Deals">

    and this is css code :


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



    .header-section2 img {
        margin-top: 10px;
        position: relative;
        animation: rotate-infinite 4s linear infinite;
        transform-origin: center center; /* Rotate around the center */
    }

    @keyframes rotate-infinite {
        0% {
            transform: rotateY(0deg); /* Start rotation */
        }
        100% {
            transform: rotateY(360deg); /* Full rotation */
        }
    }

    I tried everything but I couldn’t get this image to turn horizontally and infinite on its axis . it is only turning half circle and back. can someone tell me where the problem is and how I can solve it?

    I don’t know if this question can be asked hier or in everything else wordpress?

    thanks

    The page I need help with: [log in to see the link]

Viewing 5 replies - 1 through 5 (of 5 total)

  • The image is rotating 360 degrees, at least from my end.

    Look at the monitor’s stand: you’ll really see it’s doing a full 360-degree turn.

    Also, change the stop point from 360 to 180 to see what a 180deg rotation looks like: you’ll find there is an abrupt cut to the next cycle, whereas the 360deg rotation continues smoothly.

    Thread Starter johannes999

    (@johannes999)

    thansks ,

    I tried 180 deg and I see the difference.

    I don’t know if you understood me .by me it is turning half circle and then it is turning back infinitly half circle and back , half circle and back .. but I want it to turn only one direction infinitly . just turning all the circle and stay turning in one direction. not back .

    Moderator bcworkz

    (@bcworkz)

    The image is in fact rotating 360 deg, but it appears to oscillate back and forth for some observers. It’s an optical illusion known as the Ames Window.

    To avoid this problem you’d need two images, front and back of the monitor, where the front is used for 0-180 deg and the back from 181-360 deg, though the CSS for the back might need to be 0-180 as well, or maybe 180-0. I’m not sure, you’d need to play around with the settings.

    Thread Starter johannes999

    (@johannes999)

    thanks,

    for your advise now I know the problem .

    I wil try it tomorrow .

    Thread Starter johannes999

    (@johannes999)

    I did this:

        <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>

    and the css:

    .header-section2 {
        display: flex;
        width: 33.333%;
        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 */
        }
    }

    it is now much beter,but I couldn’t get it to rotate whole circle.

    if you can see any fault or solution and fix it I wil appreciate otherwise forget it.

    url is : https://laptopdiscounthub.com/

    thanks

Viewing 5 replies - 1 through 5 (of 5 total)
  • You must be logged in to reply to this topic.

Tags