6

Gostaria de saber como faria para rotacionar um objeto (div) em torno do eixo de um outro objeto (outra div). Meu problema é o seguinte: Tenho um circulo maior e 5 círculos menores localizados na parte abaixo deles, cada circulo é uma div.

exemplo giro em torno do eixo

Preciso que ao clicar em qualquer um dos 5 círculos menores, o mesmo vá para a posição em que se encontra o 3 dando uma volta no circulo maior, da esquerda para a direita. Exemplo de rotação ao clicar no 4:inserir a descrição da imagem aqui

Preciso que isso seja feito apenas em CSS, mas em caso de inviabilidade, a solução poderia ser feita em js se não for muito extensa, obrigado!

2

1 Resposta 1

2

Olá! Consultei essa pergunta em outros lugares e me deram uma luz. Fiz algumas alterações no código e vim com a seguinte resposta que parece estar bem próxima do seu pedido:

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

Ótima pergunta! Boa sorte aí!

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .