Create a spinning list
I'm trying to find the best method to achieve this, but can't think of anything or find much on the big internet.
But this is what I would like to achieve; List and 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 it should look something like this (I hope you have an idea, with my bad photoshop skills)
And here's a JSfiddle with simple things:
+3
source to share
1 answer
rotate
goes to ul
and removes margin
from 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;
}
+3
source to share