Rotating Divs_Complex

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

An expansion of my rotating divs pen. Intended as a demonstration of potential to students. Serves as an introduction to css gradients, media queries, animations with keyframes, and the hover selector.

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_Complex</title>
  
  
  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <div class="four">
  <div class="row">
    <div class="three">
      <div class="row">
        <div class="two">
          <div class="row">
            <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>
          <div class="row">
            <div class="one"></div>
            <div class="one"></div>
            <div class="one"></div>
          </div>
        </div>
        <div class="two">
          <div class="row">
            <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>
          <div class="row">
            <div class="one"></div>
            <div class="one"></div>
            <div class="one"></div>
          </div>
        </div>
        <div class="two">
          <div class="row">
            <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>
          <div class="row">
            <div class="one"></div>
            <div class="one"></div>
            <div class="one"></div>
          </div>
        </div>
      </div>
      <div class="row">
        <div class="two">
          <div class="row">
            <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>
          <div class="row">
            <div class="one"></div>
            <div class="one"></div>
            <div class="one"></div>
          </div>
        </div>
        <div class="two">
          <div class="row">
            <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>
          <div class="row">
            <div class="one"></div>
            <div class="one"></div>
            <div class="one"></div>
          </div>
        </div>
        <div class="two">
          <div class="row">
            <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>
          <div class="row">
            <div class="one"></div>
            <div class="one"></div>
            <div class="one"></div>
          </div>
        </div>
      </div>
      <div class="row">
        <div class="two">
          <div class="row">
            <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>
          <div class="row">
            <div class="one"></div>
            <div class="one"></div>
            <div class="one"></div>
          </div>
        </div>
        <div class="two">
          <div class="row">
            <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>
          <div class="row">
            <div class="one"></div>
            <div class="one"></div>
            <div class="one"></div>
          </div>
        </div>
        <div class="two">
          <div class="row">
            <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>
          <div class="row">
            <div class="one"></div>
            <div class="one"></div>
            <div class="one"></div>
          </div>
        </div>
      </div>
    </div>
    <div class="three">
      <div class="row">
        <div class="two">
          <div class="row">
            <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>
          <div class="row">
            <div class="one"></div>
            <div class="one"></div>
            <div class="one"></div>
          </div>
        </div>
        <div class="two">
          <div class="row">
            <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>
          <div class="row">
            <div class="one"></div>
            <div class="one"></div>
            <div class="one"></div>
          </div>
        </div>
        <div class="two">
          <div class="row">
            <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>
          <div class="row">
            <div class="one"></div>
            <div class="one"></div>
            <div class="one"></div>
          </div>
        </div>
      </div>
      <div class="row">
        <div class="two">
          <div class="row">
            <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>
          <div class="row">
            <div class="one"></div>
            <div class="one"></div>
            <div class="one"></div>
          </div>
        </div>
        <div class="two">
          <div class="row">
            <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>
          <div class="row">
            <div class="one"></div>
            <div class="one"></div>
            <div class="one"></div>
          </div>
        </div>
        <div class="two">
          <div class="row">
            <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>
          <div class="row">
            <div class="one"></div>
            <div class="one"></div>
            <div class="one"></div>
          </div>
        </div>
      </div>
      <div class="row">
        <div class="two">
          <div class="row">
            <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>
          <div class="row">
            <div class="one"></div>
            <div class="one"></div>
            <div class="one"></div>
          </div>
        </div>
        <div class="two">
          <div class="row">
            <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>
          <div class="row">
            <div class="one"></div>
            <div class="one"></div>
            <div class="one"></div>
          </div>
        </div>
        <div class="two">
          <div class="row">
            <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>
          <div class="row">
            <div class="one"></div>
            <div class="one"></div>
            <div class="one"></div>
          </div>
        </div>
      </div>
    </div>
    <div class="three">
      <div class="row">
        <div class="two">
          <div class="row">
            <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>
          <div class="row">
            <div class="one"></div>
            <div class="one"></div>
            <div class="one"></div>
          </div>
        </div>
        <div class="two">
          <div class="row">
            <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>
          <div class="row">
            <div class="one"></div>
            <div class="one"></div>
            <div class="one"></div>
          </div>
        </div>
        <div class="two">
          <div class="row">
            <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>
          <div class="row">
            <div class="one"></div>
            <div class="one"></div>
            <div class="one"></div>
          </div>
        </div>
      </div>
      <div class="row">
        <div class="two">
          <div class="row">
            <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>
          <div class="row">
            <div class="one"></div>
            <div class="one"></div>
            <div class="one"></div>
          </div>
        </div>
        <div class="two">
          <div class="row">
            <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>
          <div class="row">
            <div class="one"></div>
            <div class="one"></div>
            <div class="one"></div>
          </div>
        </div>
        <div class="two">
          <div class="row">
            <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>
          <div class="row">
            <div class="one"></div>
            <div class="one"></div>
            <div class="one"></div>
          </div>
        </div>
      </div>
      <div class="row">
        <div class="two">
          <div class="row">
            <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>
          <div class="row">
            <div class="one"></div>
            <div class="one"></div>
            <div class="one"></div>
          </div>
        </div>
        <div class="two">
          <div class="row">
            <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>
          <div class="row">
            <div class="one"></div>
            <div class="one"></div>
            <div class="one"></div>
          </div>
        </div>
        <div class="two">
          <div class="row">
            <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>
          <div class="row">
            <div class="one"></div>
            <div class="one"></div>
            <div class="one"></div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="row">
    <div class="three">
      <div class="row">
        <div class="two">
          <div class="row">
            <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>
          <div class="row">
            <div class="one"></div>
            <div class="one"></div>
            <div class="one"></div>
          </div>
        </div>
        <div class="two">
          <div class="row">
            <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>
          <div class="row">
            <div class="one"></div>
            <div class="one"></div>
            <div class="one"></div>
          </div>
        </div>
        <div class="two">
          <div class="row">
            <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>
          <div class="row">
            <div class="one"></div>
            <div class="one"></div>
            <div class="one"></div>
          </div>
        </div>
      </div>
      <div class="row">
        <div class="two">
          <div class="row">
            <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>
          <div class="row">
            <div class="one"></div>
            <div class="one"></div>
            <div class="one"></div>
          </div>
        </div>
        <div class="two">
          <div class="row">
            <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>
          <div class="row">
            <div class="one"></div>
            <div class="one"></div>
            <div class="one"></div>
          </div>
        </div>
        <div class="two">
          <div class="row">
            <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>
          <div class="row">
            <div class="one"></div>
            <div class="one"></div>
            <div class="one"></div>
          </div>
        </div>
      </div>
      <div class="row">
        <div class="two">
          <div class="row">
            <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>
          <div class="row">
            <div class="one"></div>
            <div class="one"></div>
            <div class="one"></div>
          </div>
        </div>
        <div class="two">
          <div class="row">
            <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>
          <div class="row">
            <div class="one"></div>
            <div class="one"></div>
            <div class="one"></div>
          </div>
        </div>
        <div class="two">
          <div class="row">
            <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>
          <div class="row">
            <div class="one"></div>
            <div class="one"></div>
            <div class="one"></div>
          </div>
        </div>
      </div>
    </div>
    <div class="three">
      <div class="row">
        <div class="two">
          <div class="row">
            <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>
          <div class="row">
            <div class="one"></div>
            <div class="one"></div>
            <div class="one"></div>
          </div>
        </div>
        <div class="two">
          <div class="row">
            <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>
          <div class="row">
            <div class="one"></div>
            <div class="one"></div>
            <div class="one"></div>
          </div>
        </div>
        <div class="two">
          <div class="row">
            <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>
          <div class="row">
            <div class="one"></div>
            <div class="one"></div>
            <div class="one"></div>
          </div>
        </div>
      </div>
      <div class="row">
        <div class="two">
          <div class="row">
            <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>
          <div class="row">
            <div class="one"></div>
            <div class="one"></div>
            <div class="one"></div>
          </div>
        </div>
        <div class="two">
          <div class="row">
            <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>
          <div class="row">
            <div class="one"></div>
            <div class="one"></div>
            <div class="one"></div>
          </div>
        </div>
        <div class="two">
          <div class="row">
            <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>
          <div class="row">
            <div class="one"></div>
            <div class="one"></div>
            <div class="one"></div>
          </div>
        </div>
      </div>
      <div class="row">
        <div class="two">
          <div class="row">
            <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>
          <div class="row">
            <div class="one"></div>
            <div class="one"></div>
            <div class="one"></div>
          </div>
        </div>
        <div class="two">
          <div class="row">
            <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>
          <div class="row">
            <div class="one"></div>
            <div class="one"></div>
            <div class="one"></div>
          </div>
        </div>
        <div class="two">
          <div class="row">
            <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>
          <div class="row">
            <div class="one"></div>
            <div class="one"></div>
            <div class="one"></div>
          </div>
        </div>
      </div>
    </div>
    <div class="three">
      <div class="row">
        <div class="two">
          <div class="row">
            <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>
          <div class="row">
            <div class="one"></div>
            <div class="one"></div>
            <div class="one"></div>
          </div>
        </div>
        <div class="two">
          <div class="row">
            <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>
          <div class="row">
            <div class="one"></div>
            <div class="one"></div>
            <div class="one"></div>
          </div>
        </div>
        <div class="two">
          <div class="row">
            <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>
          <div class="row">
            <div class="one"></div>
            <div class="one"></div>
            <div class="one"></div>
          </div>
        </div>
      </div>
      <div class="row">
        <div class="two">
          <div class="row">
            <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>
          <div class="row">
            <div class="one"></div>
            <div class="one"></div>
            <div class="one"></div>
          </div>
        </div>
        <div class="two">
          <div class="row">
            <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>
          <div class="row">
            <div class="one"></div>
            <div class="one"></div>
            <div class="one"></div>
          </div>
        </div>
        <div class="two">
          <div class="row">
            <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>
          <div class="row">
            <div class="one"></div>
            <div class="one"></div>
            <div class="one"></div>
          </div>
        </div>
      </div>
      <div class="row">
        <div class="two">
          <div class="row">
            <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>
          <div class="row">
            <div class="one"></div>
            <div class="one"></div>
            <div class="one"></div>
          </div>
        </div>
        <div class="two">
          <div class="row">
            <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>
          <div class="row">
            <div class="one"></div>
            <div class="one"></div>
            <div class="one"></div>
          </div>
        </div>
        <div class="two">
          <div class="row">
            <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>
          <div class="row">
            <div class="one"></div>
            <div class="one"></div>
            <div class="one"></div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="row">
    <div class="three">
      <div class="row">
        <div class="two">
          <div class="row">
            <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>
          <div class="row">
            <div class="one"></div>
            <div class="one"></div>
            <div class="one"></div>
          </div>
        </div>
        <div class="two">
          <div class="row">
            <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>
          <div class="row">
            <div class="one"></div>
            <div class="one"></div>
            <div class="one"></div>
          </div>
        </div>
        <div class="two">
          <div class="row">
            <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>
          <div class="row">
            <div class="one"></div>
            <div class="one"></div>
            <div class="one"></div>
          </div>
        </div>
      </div>
      <div class="row">
        <div class="two">
          <div class="row">
            <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>
          <div class="row">
            <div class="one"></div>
            <div class="one"></div>
            <div class="one"></div>
          </div>
        </div>
        <div class="two">
          <div class="row">
            <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>
          <div class="row">
            <div class="one"></div>
            <div class="one"></div>
            <div class="one"></div>
          </div>
        </div>
        <div class="two">
          <div class="row">
            <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>
          <div class="row">
            <div class="one"></div>
            <div class="one"></div>
            <div class="one"></div>
          </div>
        </div>
      </div>
      <div class="row">
        <div class="two">
          <div class="row">
            <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>
          <div class="row">
            <div class="one"></div>
            <div class="one"></div>
            <div class="one"></div>
          </div>
        </div>
        <div class="two">
          <div class="row">
            <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>
          <div class="row">
            <div class="one"></div>
            <div class="one"></div>
            <div class="one"></div>
          </div>
        </div>
        <div class="two">
          <div class="row">
            <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>
          <div class="row">
            <div class="one"></div>
            <div class="one"></div>
            <div class="one"></div>
          </div>
        </div>
      </div>
    </div>
    <div class="three">
      <div class="row">
        <div class="two">
          <div class="row">
            <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>
          <div class="row">
            <div class="one"></div>
            <div class="one"></div>
            <div class="one"></div>
          </div>
        </div>
        <div class="two">
          <div class="row">
            <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>
          <div class="row">
            <div class="one"></div>
            <div class="one"></div>
            <div class="one"></div>
          </div>
        </div>
        <div class="two">
          <div class="row">
            <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>
          <div class="row">
            <div class="one"></div>
            <div class="one"></div>
            <div class="one"></div>
          </div>
        </div>
      </div>
      <div class="row">
        <div class="two">
          <div class="row">
            <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>
          <div class="row">
            <div class="one"></div>
            <div class="one"></div>
            <div class="one"></div>
          </div>
        </div>
        <div class="two">
          <div class="row">
            <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>
          <div class="row">
            <div class="one"></div>
            <div class="one"></div>
            <div class="one"></div>
          </div>
        </div>
        <div class="two">
          <div class="row">
            <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>
          <div class="row">
            <div class="one"></div>
            <div class="one"></div>
            <div class="one"></div>
          </div>
        </div>
      </div>
      <div class="row">
        <div class="two">
          <div class="row">
            <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>
          <div class="row">
            <div class="one"></div>
            <div class="one"></div>
            <div class="one"></div>
          </div>
        </div>
        <div class="two">
          <div class="row">
            <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>
          <div class="row">
            <div class="one"></div>
            <div class="one"></div>
            <div class="one"></div>
          </div>
        </div>
        <div class="two">
          <div class="row">
            <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>
          <div class="row">
            <div class="one"></div>
            <div class="one"></div>
            <div class="one"></div>
          </div>
        </div>
      </div>
    </div>
    <div class="three">
      <div class="row">
        <div class="two">
          <div class="row">
            <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>
          <div class="row">
            <div class="one"></div>
            <div class="one"></div>
            <div class="one"></div>
          </div>
        </div>
        <div class="two">
          <div class="row">
            <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>
          <div class="row">
            <div class="one"></div>
            <div class="one"></div>
            <div class="one"></div>
          </div>
        </div>
        <div class="two">
          <div class="row">
            <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>
          <div class="row">
            <div class="one"></div>
            <div class="one"></div>
            <div class="one"></div>
          </div>
        </div>
      </div>
      <div class="row">
        <div class="two">
          <div class="row">
            <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>
          <div class="row">
            <div class="one"></div>
            <div class="one"></div>
            <div class="one"></div>
          </div>
        </div>
        <div class="two">
          <div class="row">
            <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>
          <div class="row">
            <div class="one"></div>
            <div class="one"></div>
            <div class="one"></div>
          </div>
        </div>
        <div class="two">
          <div class="row">
            <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>
          <div class="row">
            <div class="one"></div>
            <div class="one"></div>
            <div class="one"></div>
          </div>
        </div>
      </div>
      <div class="row">
        <div class="two">
          <div class="row">
            <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>
          <div class="row">
            <div class="one"></div>
            <div class="one"></div>
            <div class="one"></div>
          </div>
        </div>
        <div class="two">
          <div class="row">
            <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>
          <div class="row">
            <div class="one"></div>
            <div class="one"></div>
            <div class="one"></div>
          </div>
        </div>
        <div class="two">
          <div class="row">
            <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>
          <div class="row">
            <div class="one"></div>
            <div class="one"></div>
            <div class="one"></div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
  
  

</body>

</html>

/*Downloaded from https://www.codeseek.co/2ajoyce/rotating-divs_complex-yJdQqj */
.row {
  width: 100%;
}
.one {
  float: left;
  margin: 5%;
  height:0;
  padding-bottom: 23%;
  width: 23%;
  background: radial-gradient(red, white, blue);
  animation:L 10s infinite linear;
}

.two {
  float: left;
  margin: 5%;
  height:0;
  padding-bottom: 23%;
  width: 23%;
  animation:R 10s infinite linear;
}

.two:hover { 
  background: yellow;
}

.three {
  float: left;
  margin: 5%;
  height:0;
  padding-bottom: 23%;
  width: 23%;
  transition: 0.6s;
	transform-style: preserve-3d;
}

.three:hover { 
  animation:L 10s infinite linear;
}

.four {
  float: left;
  margin: 5%;
  height:0;
  padding-bottom: 90%;
  width: 90%;
}

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

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

@media only screen and (min-width : 320px) {
  .three {
    height:0;
    padding-bottom: 90%;
    width: 90%;
  }
}

@media only screen and (min-width : 480px) {
  .three {
    height:0;
    padding-bottom: 90%;
    width: 90%;
  }
}

@media only screen and (min-width : 768px) {
  .three {
    height:0;
    padding-bottom: 40%;
    width: 40%;
  }
}

@media only screen and (min-width : 992px) {
  .three {
    height:0;
    padding-bottom: 23%;
    width: 23%;
  }
}

@media only screen and (min-width : 1200px) {
  .three {
    height:0;
    padding-bottom: 23%;
    width: 23%;
  }
}

Comments