Position icons into circle (SO)

http://stackoverflow.com/q/12813573/1397351

by thebabydino

HTML

<!--[if lt IE 9]><div class='circle-container lt-ie9'><![endif]-->
<!--[if gte IE 9]><!--><div class='circle-container'><!--<![endif]-->
    <a href='#' class='center'><img src='http://imgsrc.hubblesite.org/hu/db/images/hs-2003-28-a-thumb.jpg'></a>
    <a href='#' class='deg0'><img src='http://imgsrc.hubblesite.org/hu/db/images/hs-1994-02-c-thumb.jpg'></a>
    <a href='#' class='deg45'><img src='http://imgsrc.hubblesite.org/hu/db/images/hs-2005-37-a-thumb.jpg'></a>
    <a href='#' class='deg135'><img src='http://imgsrc.hubblesite.org/hu/db/images/hs-2010-26-a-thumb.jpg'></a>
    <a href='#' class='deg180'><img src='http://imgsrc.hubblesite.org/hu/db/images/hs-2004-27-a-thumb.jpg'></a>
    <a href='#' class='deg225'><img src='http://imgsrc.hubblesite.org/hu/db/images/hs-1992-17-a-thumb.jpg'></a>
    <a href='#' class='deg315'><img src='http://imgsrc.hubblesite.org/hu/db/images/hs-2004-32-d-thumb.jpg'></a>
</div>

CSS

.circle-container {
    position: relative;
    width: 24em;
    height: 24em;
    padding: 2.8em; /*= 2em * 1.4 (2em = half the width of an img, 1.4 = sqrt(2))*/
    border: dashed 1px;
    border-radius: 50%;
    margin: 1.75em auto 0;
}
.circle-container a {
    display: block;
    overflow: hidden;
    position: absolute;
    top: 50%; left: 50%;
    width: 4em; height: 4em;
    margin: -2em; /* 2em = 4em/2 */ /* half the width */
}
.circle-container img { display: block; width: 100%; }
.deg0 {
    -webkit-transform: translate(12em);
    -moz-transform: translate(12em);
    -ms-transform: translate(12em);
    -o-transform: translate(12em);
    transform: translate(12em);
} /* 12em = half the width of the wrapper */
.lt-ie9 .deg0 {
    margin-left: 10em;
}
.deg45 {
    -webkit-transform: rotate(45deg) translate(12em) rotate(-45deg);
    -moz-transform: rotate(45deg) translate(12em) rotate(-45deg);
    -ms-transform: rotate(45deg) translate(12em) rotate(-45deg);
    -o-transform: rotate(45deg) translate(12em) rotate(-45deg);
    transform: rotate(45deg) translate(12em) rotate(-45deg);
}
.lt-ie9 .deg45 {
    margin: 6.485em;
}
.deg135 {
    -webkit-transform: rotate(135deg) translate(12em) rotate(-135deg);
    -moz-transform: rotate(135deg) translate(12em) rotate(-135deg);
    -ms-transform: rotate(135deg) translate(12em) rotate(-135deg);
    -o-transform: rotate(135deg) translate(12em) rotate(-135deg);
    transform: rotate(135deg) translate(12em) rotate(-135deg);
}
.lt-ie9 .deg135 {
    margin: 6.485em -10.485em;
}
.deg180 {
    -webkit-transform: translate(-12em);
    -moz-transform: translate(-12em);
    -ms-transform: translate(-12em);
    -o-transform: translate(-12em);
    transform: translate(-12em);
}
.lt-ie9 .deg180 {
    margin-left: -14em;
}
.deg225 {
    -webkit-transform: rotate(225deg) translate(12em) rotate(-225deg);
    -moz-transform: rotate(225deg) translate(12em) rotate(-225deg);
    -ms-transform: rotate(225deg) translate(12em)...