在特定的轴和停止中旋转对象 [英] Rotate objects in a specific Axis and Stop

查看：13
本文介绍了在特定的轴和停止中旋转对象的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我不是这个问题的作者，但它只是在这个

我需要的是，当点击 5 个小圆圈之一时，它以顺时针方向旋转，围绕大圆圈，方式直到需要第三圈的位置.下面是一个例子点击数字 4 的圆圈后旋转:

副标题: 圆圈会一直移动，直到被点击的圆圈占据位置 3

我需要仅使用 CSS 完成此操作，但以防万一不可能，如果不是太多，解决方案可能会使用 j.谢谢！

嗯.我相信这不是仅使用 CSS 就能完成的简单任务，因此只要可行，我愿意接受任何答案.感谢您的帮助！

解决方案

正如我所说，这是一项 javascript 工作 ;)

CSS 将需要大量额外的 HTML 标记和冗余的 CSS 规则(SASS 或类似的会有所帮助，但为什么不使用纯 js 呢?)

这是一个使用多次复制/粘贴规则的普通示例.

.circle {高度:50vh；宽度:50vh；边界半径:100%；边框:实心1px；边距:25vh 自动；位置:相对；}.旋转{高度:60%；位置:绝对；顶部:50%；左:50%；宽度:10vh；左边距:-5vh；显示:弹性；align-items: flex-end;}.rotate div {边界半径:100%；边框:实心1px；高度:10vh；宽度:10vh；显示:弹性；对齐项目:居中；对齐内容:居中；背景:#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;}标签{光标:指针}/* 一 */#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: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: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: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: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="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="旋转"><div><label for="one">1</label></div>

<div id="b" class="旋转"><div><label for="two">2</label></div>

<div id="c" class="旋转"><div><label for="three">3</div>

<div id="d" class="旋转"><div><label for="four">4</label></div>

<div id="e" class="旋转"><div><label for="five">5</label></div>

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!

解决方案

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>

这篇关于在特定的轴和停止中旋转对象的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆