0

In the following post the image rotates in the plane of the screen CSS3 Rotate Animation, can you help me out on how to make an image rotate into the plane of the page using CSS/JS?

I have added a gif to show the type of rotation I am trying to achieve.

enter image description here

Emma
  • 27,428
  • 11
  • 44
  • 69
Ahijit
  • 113
  • 2
  • 15

2 Answers2

4

May this help you -:

.coin{
        width: 200px;
        height: 200px;
        border-radius: 50%;
        background-color: red;
        animation: animate 1s linear infinite;
        perspective: 800px;
    }
@keyframes animate {
    0%{
       transform: rotateY(0deg);
    }
    100%{
        transform: rotateY(360deg);
    }
}

You need to add a div in html file -

<div class='coin'></div>

I hope this was what you were expecting.. Thanks

Utkarsh Tyagi
  • 1,379
  • 1
  • 7
  • 12
2

What you need simplifies to this:

.image{
    animation: spin 1.2s linear infinite;
}
@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

First, select the image and set animation to an animation with arbitrary name (spin sounds good for something rotating, but choose what you want. spin is the name i choose, 1.2s is duration but it can be ms as well like 500ms or 1200ms.

Then, define the animation by calling @keyframes animationName and then every attributte may be a percentaje, or from/to keywords like this too:

@keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

But by using that way you can't customize that much, you only get a starting and a finish point. With percentajes you can define the animation to do many different stuff.

I hope this helps you out, and let me know if need to clarify something.

Benjamín Escobar
  • 244
  • 1
  • 4
  • thanks for the answer it is really helpful but it isn't the type of rotation I am looking for, I've updated my post so that it more clear. – Ahijit Jun 20 '20 at 06:35