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:
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?
.container > :nth-of-type(1)
para seleccionar el hijo número 1 , aplicando untransform: rotate(0deg) translate(10em) rotate(0deg);
aumentando de 45 grados por cada hijo. y así para todos los hijos que desees.