using Compass trig functions to lay out elements in a circle

compass_trig_circle.sass

aside.samples
  position: absolute
  z-index: 3
  top: -90px
  right: 200px
  +transform2d(scale(0.9))
  +transition(all,0.5s)
  $badge-total: 8
  @for $i from 1 through ($badge-total + 1)
    $radius: 70.875
    $position: 360 / ($badge-total + 1) * $i
    $rotation: $position
    @if $rotation > 180
      $rotation: -360 + $rotation
    $rotation: $rotation + deg 
    $cos: cos($position * (pi() / 180))
    $x-translate: $radius * $cos + px
    $sin: sin($position * (pi() / 180))
    $y-translate: $radius * $sin + px
    img        
      &:nth-of-type(#{$i}n-#{$i})      
        +transform2d(scale(0.9) rotate($rotation) )
        top: $y-translate
        left: $x-translate
  &:hover
    +transform2d(scale(1) translate(0px, 0px))
    @for $i from 1 through ($badge-total + 1)
      $radius: 93.333
      $position: 360 / ($badge-total + 1) * $i
      $rotation: $position
      @if $rotation > 180
        $rotation: -360 + $rotation
      $rotation: $rotation + deg
      $cos: cos($position * (pi() / 180))
      $x-translate: $radius * $cos + px
      $sin: sin($position * (pi() / 180))
      $y-translate: $radius * $sin + px
      img        
        &:nth-of-type(#{$i}n-#{$i})
          top: $y-translate
          left: $x-translate
          &:hover
            +transform2d(scale(1) rotate(0))
            z-index: 50
  img
    position: absolute
    top: 0
    left: 0
    max-width: 93px
    z-index: 4
    border: 1px solid $brown
    +border-radius($ms9)
    +background-clip(padding-box)
    +transition(all,0.5s)
    +box-shadow(transparentize($black, 0.7), 2px, 1px, 2px)