Rotate objects around the specific CSS axis

Question

Rotate objects around the specific CSS axis

Navigation

#1 by (2 votes)

6

I would like to know how to rotate an object (div) around the axis of another object (another div). My problem is this: I have a larger circle and 5 smaller circles located in the part below them, each circle is a div.

Ineedtoclickonanyofthe5smallercircles,sogotothepositionwherethe3isgoingaroundthecirclefromlefttoright.Exampleofrotationwhenclickingon4:

I need this to be done only in CSS, but in case of impracticality, the solution could be done in js if it is not very extensive, thanks!

javascript css transition

asked by anonymous 01.07.2016 / 15:27

1 answer

Eclipse executes the xml buildfile of ANT 2 times, even having to execute only once Relate MySQL tables and filter by date

score 2 · Answer 1

Hello! I consulted this question elsewhere and they gave me a light. I made some changes to the code and came up with the following response that seems to be very close to your request:

.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>

Great question! Good luck there!