Animating along a circle (CSS)

.circle

  p top

  p right

  p bottom

  p left

  .box Wheee!

<script class="cssdeck" src="//cdnjs.cloudflare.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>

$size: 400px;

body {

  margin: 2rem;

}

.circle {

  position: relative;

  width: $size;

  height: $size;

  background: #8CF;

  border-radius: $size/2;

}

p {

  position: relative;

  top: -2.5rem;

  display: inline-block;

  height: 1rem;

  background: #EEE;

  padding: 0 0.25rem 0.4rem;

  cursor: pointer;

  border: 2px outset rgba(#EEE, 0.5);

  border-radius: 0.4em;

}

.box {

  background: #EEE;

  height: 2rem;

  width: 4rem;

  position: absolute;

  /*  Transfom origin at the center of the circle  */

  top: 50%;

  left: 50%;

  /*  The first translate centers the element,

      the second rotates it,

      the third offsets it to the circle's edge,

      the fourth rotates it back to preserve the element's orientation */

  transform: translate(-50%, -50%) rotate(-90deg) translateY(-$size/2) rotate(90deg);

  transition: transform 1s ease-out;

  /*  Center the contents  */

  display: flex;

  justify-content: center;

  align-items: center;

}

$(".circle").on("click", "p",  function(e) {

  var deg = $(e.target).html()

  deg = deg === "top"    ? 0 : // corresponding angle values

        deg === "right"  ? 90 :

        deg === "bottom" ? -180 :

        deg === "left"   ? -90 : 0;

  rotateTo(deg);

});

function rotateTo(deg) {

  var bplate = [

    "translate(-50%,-50%) rotate(", -90, "deg) translateY(-200px) rotate(", 90, "deg)"

  ];

  bplate[1] = deg;

  bplate[3] = 0-deg;

  $(".circle>.box").css({

    "transform": bplate.join("")

  });

}