<div>
    <div>
        <div>
            <div>
                <div>
                    <div>
                        <div>
                            <div>
                                <div>
                                    <div></div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

body {
  background: #333;
  padding-top: 9em;
  overflow: hidden;
}
div {
  padding: 2% 7%;
  border-radius: 50%;
  animation: twist 20s ease-in-out infinite;
  box-shadow: 0 0 50px 10px hotpink;
}

@keyframes twist {
  50% {
    transform: rotate3d(0, 0, 1, 127deg);
  }
  
  75% {
    transform: rotate3d(11, -10, 0, -180deg);
  }
  
  100% {
    transform: rotate3d(-10, 0, 11, 360deg);
  }
}

/*
The Ten Lines CSS Challenge

What can you do with just 10 CSS properties and the given set of 10 HTML elements?

The rules:

- Don't change the HTML
- No JavaScript
- No linear gradients
- No CSS reset
- No external sources like images
- Repeated properties count against the 10

Tag your pens with TenLines to join in on the fun! :)

Based on the CSS Haiku idea.

*/