Rotate Objects In A Specific Axis And Stop

I am not the author of this question, but it was only made in this link in the Portuguese Stackoverflow by Eryc Masselli, and I am really interested in an answer for this since I f

Solution 1:

As i said, this a javascript job ;)

CSS will need lots of extra HTML markup and redundant CSS rules (SASS or similar would help but why not plain js ?)

here is an average example using a couple of rules copied/paste many times.

.circle {
  height: 50vh;
  width: 50vh;
  border-radius: 100%;
  border: solid 1px;
  margin: 25vh auto;
  position: relative;
}

.rotate {
  height: 60%;
  position: absolute;
  top: 50%;
  left: 50%;
  width: 10vh;
  margin-left: -5vh;
  display: flex;
  align-items: flex-end;
}

.rotatediv {
  border-radius: 100%;
  border: solid 1px;
  height: 10vh;
  width: 10vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #0095FF;
}
#a, #adiv , #b , #bdiv , #c, #cdiv, #d, #ddiv, #e, #ediv {transition:1s;}
#a,  #b ,  #c,  #d, #e {transform-origin: 5vh0;}
#a{z-index:1;}
label{cursor:pointer}
/* one */#one:checked ~ .circle#a {transform: rotate(120deg);}
#one:checked ~ .circle#adiv {transform: rotate(-120deg);}

#one:checked ~ .circle#b {transform: rotate(90deg);}
#one:checked ~ .circle#bdiv {transform: rotate(-90deg);}

#one:checked ~ .circle#c {transform: rotate(60deg);}
#one:checked ~ .circle#cdiv {transform: rotate(-60deg);}

#one:checked ~ .circle#d {transform: rotate(30deg);}
#one:checked ~ .circle#ddiv {transform: rotate(-30deg);}

#one:checked ~ .circle#e {transform: rotate(0deg);}
#one:checked ~ .circle#ediv {transform: rotate(-0deg);}

/* two */#two:checked ~ .circle#b {transform: rotate(120deg);}
#two:checked ~ .circle#bdiv {transform: rotate(-120deg);}

#two:checked ~ .circle#c {transform: rotate(90deg);}
#two:checked ~ .circle#cdiv {transform: rotate(-90deg);}

#two:checked ~ .circle#d {transform: rotate(60deg);}
#two:checked ~ .circle#ddiv {transform: rotate(-60deg);}

#two:checked ~ .circle#e {transform: rotate(30deg);}
#two:checked ~ .circle#ediv {transform: rotate(-30deg);}

#two:checked ~ .circle#a {transform: rotate(360deg);}
#two:checked ~ .circle#adiv {transform: rotate(-0deg);}

/* three */#three:checked ~ .circle#c {transform: rotate(120deg);}
#three:checked ~ .circle#cdiv {transform: rotate(-120deg);}

#three:checked ~ .circle#d {transform: rotate(90deg);}
#three:checked ~ .circle#ddiv {transform: rotate(-90deg);}

#three:checked ~ .circle#e {transform: rotate(60deg);}
#three:checked ~ .circle#ediv {transform: rotate(-60deg);}

#three:checked ~ .circle#a {transform: rotate(390deg);}
#three:checked ~ .circle#adiv {transform: rotate(-30deg);}

#three:checked ~ .circle#b {transform: rotate(360deg);}
#three:checked ~ .circle#bdiv {transform: rotate(-0deg);}

/* four */#four:checked ~ .circle#d {transform: rotate(120deg);}
#four:checked ~ .circle#ddiv {transform: rotate(-120deg);}

#four:checked ~ .circle#e {transform: rotate(90deg);}
#four:checked ~ .circle#ediv {transform: rotate(-90deg);}

#four:checked ~ .circle#a {transform: rotate(420deg);}
#four:checked ~ .circle#adiv {transform: rotate(-60deg);}

#four:checked ~ .circle#b {transform: rotate(390deg);}
#four:checked ~ .circle#bdiv {transform: rotate(-30deg);}

#four:checked ~ .circle#c {transform: rotate(360deg);}
#four:checked ~ .circle#cdiv {transform: rotate(-0deg);}

/* five */#five:checked ~ .circle#e {transform: rotate(120deg);}
#five:checked ~ .circle#ediv {transform: rotate(-120deg);}

#five:checked ~ .circle#a {transform: rotate(450deg);}
#five:checked ~ .circle#adiv {transform: rotate(-90deg);}

#five:checked ~ .circle#b {transform: rotate(420deg);}
#five:checked ~ .circle#bdiv {transform: rotate(-60deg);}

#five:checked ~ .circle#c {transform: rotate(390deg);}
#five:checked ~ .circle#cdiv {transform: rotate(-30deg);}

#five:checked ~ .circle#d {transform: rotate(360deg);}
#five:checked ~ .circle#ddiv {transform: rotate(-0deg);}

input[name="group"]{position:absolute;right:100vw}

<inputid="one"type="radio"name="group" /><inputid="two"type="radio"name="group" /><inputid="three"type="radio"name="group" /><inputid="four"type="radio"name="group" /><inputid="five"type="radio"name="group" /><divclass="circle"><divid="a"class="rotate"><div><labelfor="one">1</label></div></div><divid="b"class="rotate"><div><labelfor="two">2</label></div></div><divid="c"class="rotate"><div><labelfor="three">3</div></div><divid="d"class="rotate"><div><labelfor="four">4</label></div></div><divid="e"class="rotate"><div><labelfor="five">5</label></div></div></div>

Solution 2:

Thank you very much for @GCyrillus for the help. I was able to tweak his answer and get what I really needed. The code is below:

.circle {
  height: 50vh;
  width: 50vh;
  border-radius: 100%;
  border: solid 1px;
  margin: 25vh auto;
  position: relative;
}

.rotate {
  height: 60%;
  position: absolute;
  top: 50%;
  left: 50%;
  width: 10vh;
  margin-left: -5vh;
  display: flex;
  align-items: flex-end;
}

.rotatediv {
  border-radius: 100%;
  border: solid 1px;
  height: 10vh;
  width: 10vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #0095FF;
}

#a,
#adiv,
#b,
#bdiv,
#c,
#cdiv,
#d,
#ddiv,
#e,
#ediv {
  transition: 1s;
}

#a,
#b,
#c,
#d,
#e {
  transform-origin: 5vh0;
}

#a {
  z-index: 1;
}

label {
  cursor: pointer
}


/* one */#one:checked~.circle#a {
  transform: rotate(0deg);
}

#one:checked~.circle#adiv {
  transform: rotate(-0deg);
}

#one:checked~.circle#b {
  transform: rotate(-30deg);
}

#one:checked~.circle#bdiv {
  transform: rotate(30deg);
}

#one:checked~.circle#c {
  transform: rotate(-60deg);
}

#one:checked~.circle#cdiv {
  transform: rotate(60deg);
}

#one:checked~.circle#d {
  transform: rotate(60deg);
}

#one:checked~.circle#ddiv {
  transform: rotate(-60deg);
}

#one:checked~.circle#e {
  transform: rotate(30deg);
}

#one:checked~.circle#ediv {
  transform: rotate(-30deg);
}


/* two */#two:checked~.circle#b {
  transform: rotate(0deg);
}

#two:checked~.circle#bdiv {
  transform: rotate(-0deg);
}

#two:checked~.circle#c {
  transform: rotate(-30deg);
}

#two:checked~.circle#cdiv {
  transform: rotate(30deg);
}

#two:checked~.circle#d {
  transform: rotate(300deg);
}

#two:checked~.circle#ddiv {
  transform: rotate(60deg);
}

#two:checked~.circle#e {
  transform: rotate(60deg);
}

#two:checked~.circle#ediv {
  transform: rotate(-60deg);
}

#two:checked~.circle#a {
  transform: rotate(30deg);
}

#two:checked~.circle#adiv {
  transform: rotate(-30deg);
}


/* three */#three:checked~.circle#c {
  transform: rotate(0deg);
}

#three:checked~.circle#cdiv {
  transform: rotate(-0deg);
}

#three:checked~.circle#d {
  transform: rotate(330deg);
}

#three:checked~.circle#ddiv {
  transform: rotate(30deg);
}

#three:checked~.circle#e {
  transform: rotate(300deg);
}

#three:checked~.circle#ediv {
  transform: rotate(60deg);
}

#three:checked~.circle#a {
  transform: rotate(60deg);
}

#three:checked~.circle#adiv {
  transform: rotate(-60deg);
}

#three:checked~.circle#b {
  transform: rotate(30deg);
}

#three:checked~.circle#bdiv {
  transform: rotate(-30deg);
}


/* four */#four:checked~.circle#d {
  transform: rotate(360deg);
}

#four:checked~.circle#ddiv {
  transform: rotate(-0deg);
}

#four:checked~.circle#e {
  transform: rotate(330deg);
}

#four:checked~.circle#ediv {
  transform: rotate(30deg);
}

#four:checked~.circle#a {
  transform: rotate(300deg);
}

#four:checked~.circle#adiv {
  transform: rotate(60deg);
}

#four:checked~.circle#b {
  transform: rotate(60deg);
}

#four:checked~.circle#bdiv {
  transform: rotate(-60deg);
}

#four:checked~.circle#c {
  transform: rotate(30deg);
}

#four:checked~.circle#cdiv {
  transform: rotate(-30deg);
}


/* five */#five:checked~.circle#e {
  transform: rotate(360deg);
}

#five:checked~.circle#ediv {
  transform: rotate(-0deg);
}

#five:checked~.circle#a {
  transform: rotate(330deg);
}

#five:checked~.circle#adiv {
  transform: rotate(30deg);
}

#five:checked~.circle#b {
  transform: rotate(300deg);
}

#five:checked~.circle#bdiv {
  transform: rotate(60deg);
}

#five:checked~.circle#c {
  transform: rotate(60deg);
}

#five:checked~.circle#cdiv {
  transform: rotate(-60deg);
}

#five:checked~.circle#d {
  transform: rotate(390deg);
}

#five:checked~.circle#ddiv {
  transform: rotate(-30deg);
}

input[name="group"] {
  position: absolute;
  right: 100vw
}

<inputid="one"type="radio"name="group" /><inputid="two"type="radio"name="group" /><inputid="three"type="radio"name="group" /><inputid="four"type="radio"name="group" /><inputid="five"type="radio"name="group" /><divclass="circle"><divid="a"class="rotate"><div><labelfor="one">1</label></div></div><divid="b"class="rotate"><div><labelfor="two">2</label></div></div><divid="c"class="rotate"><div><labelfor="three">3</div></div><divid="d"class="rotate"><div><labelfor="four">4</label></div></div><divid="e"class="rotate"><div><labelfor="five">5</label></div></div></div>