Question 167494 in Html Question posted in
Some basic documentation can be found here.

How can I make an HTML element rotate with CSS inline only, or even without CSS at all?

I have a task that requires to rotate a logo with only inline CSS, and without JS at all.

I tried to look forward into defining an animation in the style attribute but couldn’t find a thing.

Tags:

2

Answers


  1. 0 
    @media (prefers-reduced-motion: no-preference) {
  .logo {
    animation: logo-spin infinite 20s linear;
  }
}

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

    please try this code

    Login or Signup to reply.
  2. 0

    You can’t define animation inline. The animation is not declared in the element, it’s only called upon it.

    However If you only want to rotate (not animate), you can do this with css transform property.

    Here is an example:

    <div style="transform: rotate(45deg)">
  <img src="https://stackoverflow.design/assets/img/logos/so/logo-stackoverflow.svg" alt="logo"/>
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search