Rotating Divs

In this example below you will see how to do a Rotating Divs with some HTML / CSS and Javascript

A simple demonstration of css animations using keyframes. Intended for use as a base project to be expanded on by students.

Thumbnail
This awesome code was written by 2ajoyce, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright 2ajoyce ©
  • HTML
  • CSS
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>Rotating Divs</title>
  
  
  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <div class="row">
  <div class="one"></div>
  <div class="one"></div>
  <div class="one"></div>
  <div class="one"></div>
</div>
<div class="row">
  <div class="one"></div>
  <div class="one"></div>
  <div class="one"></div>
  <div class="one"></div>
</div>
<div class="row">
  <div class="one"></div>
  <div class="one"></div>
  <div class="one"></div>
  <div class="one"></div>
</div>
<div class="row">
  <div class="one"></div>
  <div class="one"></div>
  <div class="one"></div>
  <div class="one"></div>
</div>
  
  

</body>

</html>

/*Downloaded from https://www.codeseek.co/2ajoyce/rotating-divs-XKLBwG */
.row {
  width: 700px;
}
.one {
  float: left;
  margin: 50px;
  height: 50px;
  width: 50px;
  background: green;
  animation:R 10s infinite linear;
}

@keyframes R{
  0%{transform:rotate(0deg);}
  100%{transform:rotate(360deg)}
}

Comments