问题
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 found it really intriguing. I will translate it below:
I would like to know how to rotate and object (div) around an axis of another object (another div). My problem is the following: I have a big circle and 5 other small circles under the big one. Each circle is a separate div.
What I need is that when one of the small 5 circles is clicked, it rotates in a clockwise, around the big circle, manner until it takes the third circles's position. The following is an example of the rotation after the circle of number 4 is clicked:
Subtitle: The circles will move until the clicked circle takes the position 3
I need this to be done ONLY with CSS, but in case it is impossible, the solution may use j if it is not too much. Thank you!
Well. I believe this is no simple task only with CSS, so I am willing to take any answer as long it is something doable. Thank you for the help!
回答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>回答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>来源：https://stackoverflow.com/questions/43215883/rotate-objects-in-a-specific-axis-and-stop