rotating circles

by Harry Dry

HTML

<li>So if you'd click on the 2nd circle it rotates anticlockwise and swaps with the first circle</li>
<li>And if you clicked the 3rd cicle it would takes the position of the new first circle</li>
<li> The gold star denotes the circle which gets clicked.</li>
<li> The tricky part is it must work continously.</li>
<li>So if you then clicked the red circle again in example 3 it becomes circle 1 again </li>
<div class="outer">
<img src="https://s3.amazonaws.com/glonbalhumen/exampleImg.png" alt="" class="exampleImg">
 <div class="circleContainer">
   <div class="circle purple circle__zero"></div>
   <div class="circle red circle__one"></div>
   <div class="circle blue circle__two"></div>
 </div>
</div>

SASS

img
  width: 36%

.outer
  display: flex
  width: calc(100% - 8rem)
  align-items: center
  justify-content: space-between
  padding: 2rem 4rem

.circleContainer
  border: 2px solid red
  display: flex
  align-items: center
  position: relative
  width: 20rem
  height: 10rem

.circle
  width: 2rem
  height: 2rem
  border-radius: 100px
  position: absolute
  transition: all 0.2s
  &__zero
    left: 0%
  &__one
    left: 0%
    right: 0%
    margin: 0 auto
  &__two
    right: 0%

.purple
  background-color: #9013FE

.blue
  background-color: #4A90E2

.red
  background-color: #D0021B