Create a list with rotation

Question

I have been trying to figure out the best method to achieve this, but can't think of anything and don't find to much on the big internet.

But this is what I would like to achieve; A list and on each <li> rotate -45deg

li {
    width: 160px;
    height: 160px;
    border: solid 1px #828080;
    display: inline-block;
    padding: 0;
    float: left;
    transform:rotate(-45deg);
    -ms-transform:rotate(-45deg); 
    -webkit-transform:rotate(-45deg);
    position: relative;
    margin: 33px;
}

And should look like something like this (Hope you get the idea, with my bad photoshop-skills)

And here's a JSfiddle with the simple stuff:

Answer 1

The rotate goes on the ul and remove the margin from your li:

.picker {
    list-style: none;
    margin: 0;
    padding: 0;
    height: 100%;
     transform:rotate(-45deg);
    -ms-transform:rotate(-45deg); 
    -webkit-transform:rotate(-45deg);
}

li {
    width: 160px;
    height: 160px;
    border: solid 1px #828080;
    display: inline-block;
    padding: 0;
    float: left;
    position: relative;
    background-color: red;
}

Fiddle