h1 Centering rotating CSS triangles
.demo
  .circle
    span Problem
    .triangle.naive
  .circle
    span A solution
    .triangle.centred
  p Hover the triangles to see the box being rotated.
  p.l CSS rotations centre on bounding boxes, so triangles are not rotated on their centroid.
  p.l Using the <code>:after</code> pseudo-element for the triangle, the original element may be given a height and width to create bounding box centred around the triangle's centroid.

@import compass

$PI: 3.1415926
$rad: 128px
$margin: 32px
$track: 3px
$edge: $rad * sin(2 * $PI / 3) / sin($PI / 6)
$height: $edge * sin(2 * $PI / 3)
$font: 18px
$col: #547
$period: 8s

body
  background: $col
  font: #{$font} / 1em sans-serif
  color: lighten($col, 40%)
  text-align: center

h1
  font-weight: normal
  font-size: 1.5em

.l
  text-align: left
  line-height: 1.3em

.demo
  margin: 2.5em auto
  width: ($rad + $track) * 4 + $margin

.circle
  margin-bottom: 1em
  float: left
  width: $rad * 2
  height: $rad * 2
  border: $track dashed lighten($col, 30%)
  border-radius: $rad
  &:first-of-type
    margin-right: $margin
  span
    display: block
    margin: -$font * 1.5 0 $font/2

=triangle
  height: 0
  width: 0
  border-style: solid
  border-width: 0 $edge/2 $height
  border-color: transparent transparent rgba(255, 255, 255, 0.2)

.triangle
  -webkit-animation: spin $period linear infinite
  -moz-animation: spin $period linear infinite
  animation: spin $period linear infinite
  &:hover
    background: rgba(0, 0, 0, 0.2)

.naive
  margin-left: $rad - $edge/2
  +triangle

.centred
  position: relative
  height: $rad * 2
  width: $rad * 2
  &:after
    content: ""
    position: absolute
    top: 0
    left: $rad - $edge/2
    +triangle

@-webkit-keyframes spin
  to
    -webkit-transform: rotate(360deg)
@-moz-keyframes spin
  to
    -moz-transform: rotate(360deg)
@keyframes spin
  to
    transform: rotate(360deg)