旋转特定轴和停止中的对象

时间：2017-04-04 19:20:20

标签： javascript html css transition

我不是这个问题的作者，但它只是由Eryc Masselli在葡萄牙Stackoverflow中的这个link制作的，我真的很感兴趣，因为我发现这真的很有趣。我将在下面翻译它：

  

我想知道如何围绕轴旋转和对象（div）   另一个对象（另一个div）。我的问题如下：我有一个   大圆圈和大圆圈下的其他5个小圆圈。每个圆圈都是   一个单独的div。

     

inserir a descrição da imagem aqui

     

我需要的是当点击其中一个小5圈时，它   顺时针旋转，围绕大圆圈，直到它需要   第三圈的位置。以下是一个例子   单击数字4后的旋转：

     

The circles will move until the clicked circle takes the position 3   字幕： 圆圈将一直移动，直到点击的圆圈占据位置3

     

我需要用CSS完成 ONLY ，但是如果是的话   如果不是太多，解决方案可能会使用j。谢谢！

好。我相信这不仅仅是CSS的简单任务，所以只要它是可行的，我愿意接受任何答案。谢谢你的帮助！

2 个答案:

答案 0 :(得分：1)

正如我所说，这是一个javascript工作;）

CSS需要大量额外的HTML标记和冗余的CSS规则（SASS或类似规则会有所帮助，但为什么不是普通的js？）

这是一个使用复制/粘贴多次规则的平均示例。

＆＃13;
＆＃13; 
.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}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

答案 1 :(得分：1)

非常感谢@GCyrillus的帮助。我能够调整他的答案，得到我真正需要的东西。代码如下：

＆＃13;
＆＃13; 
.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
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题