Skip to content Skip to sidebar Skip to footer
Home / Css / Html / Javascript / Transition

Rotate Objects In A Specific Axis And Stop

Post a Comment
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;
}

.rotate div {
  border-radius: 100%;
  border: solid 1px;
  height: 10vh;
  width: 10vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #0095FF;
}
#a, #a div , #b , #b div , #c, #c div, #d, #d div, #e, #e div {transition:1s;}
#a,  #b ,  #c,  #d, #e {transform-origin: 5vh 0;}
#a{z-index:1;}
label{cursor:pointer}
/* one */

#one:checked ~ .circle  #a {transform: rotate(120deg);}
#one:checked ~ .circle #a  div {transform: rotate(-120deg);}

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

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

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

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

/* two */

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

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

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

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

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

/* three */

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

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

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

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

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

/* four */

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

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

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

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

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

/* five */

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

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

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

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

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

input[name="group"]{position:absolute;right:100vw}
<input id="one" type="radio"  name="group" />
<input id="two" type="radio" name="group" />
<input id="three" type="radio" name="group" />
<input id="four" type="radio" name="group" />
<input id="five" type="radio" name="group" />
<div class="circle">
  <div id="a" class="rotate">
    <div><label for="one">1</label></div>
  </div>
  <div id="b" class="rotate">
    <div><label for="two">2</label></div>
  </div>
  <div id="c" class="rotate">
    <div><label for="three">3</div>
  </div>
  <div id="d" class="rotate">
    <div><label for="four">4</label></div>
  </div>
  <div id="e" class="rotate">
    <div><label for="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;
}

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

#a,
#a div,
#b,
#b div,
#c,
#c div,
#d,
#d div,
#e,
#e div {
  transition: 1s;
}

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

#a {
  z-index: 1;
}

label {
  cursor: pointer
}


/* one */

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

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

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

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

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

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

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

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

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

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


/* two */

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

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

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

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

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

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

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

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

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

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


/* three */

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

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

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

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

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

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

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

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

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

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


/* four */

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

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

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

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

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

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

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

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

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

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


/* five */

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

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

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

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

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

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

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

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

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

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

input[name="group"] {
  position: absolute;
  right: 100vw
}
<input id="one" type="radio" name="group" />
<input id="two" type="radio" name="group" />
<input id="three" type="radio" name="group" />
<input id="four" type="radio" name="group" />
<input id="five" type="radio" name="group" />
<div class="circle">
  <div id="a" class="rotate">
    <div><label for="one">1</label></div>
  </div>
  <div id="b" class="rotate">
    <div><label for="two">2</label></div>
  </div>
  <div id="c" class="rotate">
    <div><label for="three">3</div>
  </div>
  <div id="d" class="rotate">
    <div><label for="four">4</label></div>
  </div>
  <div id="e" class="rotate">
    <div><label for="five">5</label></div>
  </div>
</div>

You may like these posts

Post a Comment for "Rotate Objects In A Specific Axis And Stop"