Blog

You are currently viewing Create animation with rotation of box using CSS
Create animation with rotation of box using CSS

Create animation with rotation of box using CSS

  • Post category:CSS

How to Create animation with rotation of box using CSS?

Get the code of Create animation with rotation of box using CSS and watch video tutorials. You can practice using our code editor. Our practical guide will make your learning journey much easier. You can explore the tutorial and learn.

<div>Simple Element</div>
<div id="rotatediv">Rotate Element</div>
div {
  width: 150px;
  height: 120px;
  background: lightgreen;
  margin: 10px;
  padding: 10px;
  border: 2px solid;
  border-radius: 5px;
  margin-left: 20px;
}
#rotatediv {
  transform: rotate(40deg);
  animation-name: rotateanimation;
  animation-duration: 4s;
  animation-iteration-count: infinite;
}
@keyframes rotateanimation {
  from {
    background: lightgreen;
  }
  to {
    background: yellow; 
  }
}
Try it Yourself

Take your coding skills to the next level with this tutorial.: How to create 3d collections slider section in shopify store?