< Back to Frontend Friday Folks Index

Sunrays

Visit the official puzzle page (affiliate link!) to play it yourself. If you buy a course from CSSBattle through my affiliate link, I receive a share of it!

Highlighted solution (294 characters)
1 
<div><div><div><div><div><div><div>
2 
<style>
3 
  body {
4 
    background:#D25B70;
5 
    transform: translate(131px, 132px) rotate(-30deg);
6 
  }
7 
  div {
8 
    rotate: 30deg;
9 
    transform-origin: 120px 5px;
10 
    width: 100px;
11 
    height: 10px;
12 
    background: #F2E09F;
13 
    border-radius: 9px;
14 
  }
15 
</style>
16

Put the rotation point (transform-origin) in the middle and rotate the divs around it!

< Back to Frontend Friday Folks Index