Radial layout CSS

gistfile1.css

.key li {
  position: absolute;
  -webkit-transform-origin: 50% 90px 0 true 50%;
}
.key ul {
    position: absolute; 
    -webkit-transform: translateX(-32px) translateY(-64px)
}
.key li:nth-child(1) {
  -webkit-transform: rotate(30deg);
}
.key li:nth-child(1) i {
  -webkit-transform: rotate(-30deg);
}
.key li:nth-child(2) {
  -webkit-transform: rotate(60deg);
}
.key li:nth-child(2) i {
  -webkit-transform: rotate(-60deg);
}
.key li:nth-child(3) {
  -webkit-transform: rotate(90deg);
}
.key li:nth-child(3) i {
  -webkit-transform: rotate(-90deg);
}
.key li:nth-child(4) {
  -webkit-transform: rotate(120deg);
}
.key li:nth-child(4) i {
  -webkit-transform: rotate(-120deg);
}
.key li:nth-child(5) {
  -webkit-transform: rotate(150deg);
}
.key li:nth-child(5) i {
  -webkit-transform: rotate(-150deg);
}
.key li:nth-child(6) {
  -webkit-transform: rotate(180deg);
}
.key li:nth-child(6) i {
  -webkit-transform: rotate(-180deg);
}
.key li:nth-child(7) {
  -webkit-transform: rotate(210deg);
}
.key li:nth-child(7) i {
  -webkit-transform: rotate(-210deg);
}
.key li:nth-child(8) {
  -webkit-transform: rotate(240deg);
}
.key li:nth-child(8) i {
  -webkit-transform: rotate(-240deg);
}
.key li:nth-child(9) {
  -webkit-transform: rotate(270deg);
}
.key li:nth-child(9) i {
  -webkit-transform: rotate(-270deg);
}
.key li:nth-child(10) {
  -webkit-transform: rotate(300deg);
}
.key li:nth-child(10) i {
  -webkit-transform: rotate(-300deg);
}
.key li:nth-child(11) {
  -webkit-transform: rotate(330deg);
}
.key li:nth-child(11) i {
  -webkit-transform: rotate(-330deg);
}
.key li:nth-child(12) {
  -webkit-transform: rotate(360deg);
}
.key li:nth-child(12) i {
  -webkit-transform: rotate(-360deg);
}