特定のAxisとStopでオブジェクトを回転する

Question

私はこの質問の著者ではありませんが、これはEryc Masselliのポルトガル語Stackoverflowのlinkで作成されたものです。本当に興味をそそられる。私は以下のそれを翻訳します：

私は 別のオブジェクト（別のdiv）の軸を中心に回転してオブジェクト（DIV）する方法を知っていただきたいと思います。私の問題は次のとおりです：私は ビッグサークルと5つの小さなサークルを持っています。各円は の別個のdivです。

私は必要なもの、小さな5円のいずれかがクリックされたとき、それは 第三の円の位置を取るまで、それ は大きな円、やり方を中心に、時計回りに回転していることです。

字幕：クリック円私はこれを必要とする位置3

をとるまで円が移動するの数4の円がクリックされた後、次は 回転の一例ですCSSでのみを実行してもかまいませんが、 の場合は不可能ですが、あまり多くないと解がjを使うことがあります。ありがとうございました！

私はこれがCSSだけでは簡単な作業ではないと信じています。だから私は何かができる限り何らかの答えをとるつもりです。お手伝いありがとう！

Answer 1

私が言ったように、このjavascriptの仕事;）

CSSは、余分なHTMLマークアップと冗長CSSルールの多くが必要になります（SASSまたは類似は役立つだろうが、なぜない無地JS）ここ

はありますか？いくつかのルールを使って平均的な例をコピー/ペーストします。

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

Answer 2

の助けを@GCyrillusのためにありがとうございました。私は彼の答えを微調整して、本当に必要なものを得ることができました。コードは以下の通りです：シングルアニメーションCSSの

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