6

Tengo lo siguiente:

* {
  font-family: Arial, Helvetica, sans-serif;
}

.x-y-center {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  text-align: center !important;
}

.g {
  font-size: 55px !important;
  width: 100px;
  height: 100px;
  border-radius: 50% !important;
  transition: all .2s ease-in-out;
  margin: 25px 0px 25px 0px;
}

.d {
  font-size: 25px !important;
  transition: all .2s ease-in-out;
  width: 40px;
  height: 40px;
  border-radius: 50% !important;
  margin: 25px 0px 5px 0px;
}

.g:hover,
.d:hover {
  transform: scale(1.1);
  box-shadow: 10px 10px 5px #888888;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css?v=1">
<div class="container ">

  <div class="g x-y-center btn btn-primary">
    <b>G</b>
  </div>

  <div class="d x-y-center btn btn-success">
    <b>D</b>
  </div>

  <div class="d x-y-center btn btn-success">
    <b>D</b>
  </div>

  <div class="d x-y-center btn btn-success">
    <b>D</b>
  </div>

</div>

Quisiera poder lograr esto:

introducir la descripción de la imagen aquí

Estuve intentando con jquery, pero caigo en una infinidad de condicionales (if-else if-else) validando coordenadas y posiciones.

¿Cómo lo puedo hacer de una forma sencilla y dinámica?

2
  • .container > :nth-of-type(1) para seleccionar el hijo número 1 , aplicando un transform: rotate(0deg) translate(10em) rotate(0deg); aumentando de 45 grados por cada hijo. y así para todos los hijos que desees.
    – Dev. Joel
    Commented el 7 abr. 2017 a las 17:10
  • @DevJoel podrías añadir un ejemplo? creo que tu solución es lo que busco, gracias
    – Jorius
    Commented el 7 abr. 2017 a las 17:22

2 respuestas 2

6

Primero asignamos una posición absoluta para todos los elementos .container > {position: absolute; para luego poder manipular y aplicarles una transformación básica de rotación y traslación. además de aplicarle algunas propiedades adicionales como el border-radius para darle estilo de circulo entre otras . Recordar que los grados aplicables a la rotación pueden variar dependiendo de los elementos que tengas, (360/cantidadelementos) = TotalGradosaplicables en mi ejemplo son 6 elementos sería = 60 grados aplicables ,

.container > * {
  position: absolute;
  top: 200px;
  left: 50%;
  width: 70px;
  height: 70px;
  border-radius: 50% !important;
  padding-top: 20px !important;
  font-size: 16px !important;
}

.padre{
width:120px;
height: 120px;
left: 48%;
top: 180px;
padding:40px !important;
font-size:30px !important;
}
.container > :nth-of-type(1) {
  transform: rotate(0deg) translate(10em) rotate(0deg);
}
.container > :nth-of-type(2) {
  transform: rotate(60deg) translate(10em) rotate(-60deg);
}
.container > :nth-of-type(3) {
  transform: rotate(120deg) translate(10em) rotate(-120deg);
}
.container > :nth-of-type(4) {
  transform: rotate(180deg) translate(10em) rotate(-180deg);
}
.container > :nth-of-type(5) {
  transform: rotate(240deg) translate(10em) rotate(-240deg);
}
.container > :nth-of-type(6) {
  transform: rotate(300deg) translate(10em) rotate(-300deg);
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css?v=1">
<div class="container">
  <div class="btn btn-success">
    <b>D</b>
  </div>
  <div class="btn btn-success">
    <b>D</b>
  </div>
  <div class="btn btn-success">
    <b>D</b>
  </div>
  <div class="d btn btn-success">
    <b>D</b>
  </div>
  <div class="btn btn-success">
    <b>D</b>
  </div>
  <div class="btn btn-success">
    <b>D</b>
  </div>
 
  <div class="padre btn btn-primary">
    <b>G</b>
  </div>
</div>

2
  • @DevJoel Muchas gracias, esto era lo que estaba buscando, una última cosa, con que propiedad puedo separar un poco más los elementos hijos del padre?
    – Jorius
    Commented el 7 abr. 2017 a las 18:58
  • 1
    con la traslación , translate(20em)
    – Dev. Joel
    Commented el 7 abr. 2017 a las 19:00
3

Realmente esto lo puedes realizar con CSS y, aunque te librarás de los condicionales (if-elses), no te librarás de hacerlo con posiciones (al menos con esta solución).

Lo que te propongo es que el círculo principal lo posiciones con position: relative y englobes el resto de círculos verdes dentro del mismo posicionandolos con position: absolute.

De esta manera, como un elemento posicionado con position: absolute se puede posicionar tomando referencia el elemento padre posicionado, podremos posicionar los círculos verdes con respecto al círculo azul. Para ello necesitarás hacer uso de las propiedades top, left, bottom y right.

¿Cuál es la ventaja de hacerlo de esta manera?

Que en cualquier lugar en el que posiciones el círculo azul los círculos verdes estarán posicionados respecto a este y no tendrás que recalcular las coordenadas en las que se encuentra de nuevo el círculo azul.

Ejemplo con tres círculos alrededor del círculo azul:

* {
  font-family: Arial, Helvetica, sans-serif;
}

.x-y-center {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  text-align: center !important;
}

.g {
  font-size: 55px !important;
  width: 100px;
  height: 100px;
  border-radius: 50% !important;
  transition: all .2s ease-in-out;
  margin: 25px 0px 25px 0px;
}

.d {
  font-size: 25px !important;
  transition: all .2s ease-in-out;
  width: 40px;
  height: 40px;
  border-radius: 50% !important;
  margin: 25px 0px 5px 0px;
}

.g:hover,
.d:hover {
  transform: scale(1.1);
  box-shadow: 10px 10px 5px #888888;
}


/* Nuevas clases */

.container{
  max-width: 120px;
}

.principal{
  position: relative;
  top: 50px;
}

.absoluto{
  position: absolute;
}

.primero{
  top: -75px;
  left: 20px;
}

.segundo{
  top: -50px;
  left: -35px;
}

.tercero{
  top: 5px;
  left: -50px;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css?v=1">
<div class="container ">

  <div class="principal g x-y-center btn btn-primary">
    <b>G</b>
    <div class="primero absoluto d x-y-center btn btn-success">
      <b>D</b>
    </div>
    <div class="segundo absoluto d x-y-center btn btn-success">
      <b>D</b>
    </div>
    <div class="tercero absoluto d x-y-center btn btn-success">
      <b>D</b>
    </div>
  </div>
</div>

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.