.circle
.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;
$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) {
$(".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("")
});
}