旋轉特定軸中的對象並停止

我不是這個問題的作者，但它只是在Eryc Masselli的葡萄牙語Stackoverflow的link中做出的，而且我對這個問題的答案真的很感興趣，因爲我發現它真的很有趣。我將在下面翻譯它：旋轉特定軸中的對象並停止

我想知道如何旋轉和對象（div）圍繞另一個對象（另一個div）的軸。我的問題如下：我有一個大圓圈和其他5個小圓圈。每個圈子是一個單獨的div。

我需要的是，當小5圈的一個被點擊，它旋轉可以順時針方向，繞大圈，直到方式需要第三圈的地位。以下是被點擊數4的圓後的旋轉的例子：

字幕：圓圈將移動直到點擊圓取位置3

我需要這僅限於帶有CSS的，但如果它不可能是，則解決方案可能會使用j，如果它不是太多。謝謝！

好吧。我相信這不是一個簡單的任務，只有CSS，所以我願意接受任何答案，只要它是可行的。感謝您的幫助！

來源

2017-04-04 Leon Freire

單個動畫的CSS可以幫助http://codepen.io/gc-nomade/pen/rybOmw，但對交互您需要的JavaScript，CSS將需要很多規則和額外的標記來欺騙它並很容易破壞 –

@GCyrillus原始的OP要求一個唯一的CSS答案，但正如我所說的，我願意接受更詳細的答案。 –

正如我所說，這是一個JavaScript的工作;）

CSS將需要大量額外的HTML標記和多餘的CSS規則（上海社會科學院或類似，將有助於但爲什麼不是純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>

來源

2017-04-04 21:45:27

哇！謝謝！這與我想要的非常相似。我會稍微調整一下，看看還有什麼可以嘗試。 –

我能夠調整你的CSS，並得到了一些非常相似的東西被問到！非常感謝您的幫助！我想給你「接受的答案」，但我希望發佈已調整的版本作爲答案。 –

@LeonFreire太棒了！我看到了同樣的問題，無論單擊元素的初始位置如何，它總是沿着相同的方向旋轉。但如果沒關係，那很好;） –

非常感謝您對@GCyrillus的幫助。我能夠調整他的答案，並得到我真正需要的。代碼如下：

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

來源

2017-04-05 14:43:22

旋轉特定軸中的對象並停止

回答

相關問題