Distribución uniforme de elementos alrededor de un círculo: mejor con transform que top/left 17.10.13

Distribución uniforme de elementos alrededor de un círculo: mejor con transform que top/left

¿Cómo colocar varios elementos alrededor de otro distribuidos equitativamente y que conformen un círculo?

La primera respuesta o intención suele ser utilizar alguna de las propiedades de colocación 'top / right / bottom / left' junto al posicionamiento absoluto referente al elemento central.

Pero nada más comenzar se ven las dificultades de la vía elegida. Pues hay que acertar, no con un punto de ubicación, sino donde coinciden dos para cada elemento: el radio respecto al elemento central y el arco y su cuerda entre cada pareja de ellos.

Pero hay una forma mucho más sencilla y simple de lograrlo con puro Css. Sólo se necesita tener en cuenta el ángulo que han de formar.

¿Lo vemos con código?

Marcado html

Tengamos una serie de elementos contenidos en un div cualquiera. El primero (con clase 'center') es el que se colocará en el centro del círculo formado por los restantes:

Observa que los demás elementos tienen declarada una clase del tipo 'degNº' sólo a efectos didácticos y para una mejor comprensión. Se podría prescindir de las clases y utilizar selectores del tipo 'nth-child(nº)'.

El Css más relevante

Vamos con el inicial y preparatorio del terreno:

Lo primero es definir el diámetro del círculo: 24em en el ejemplo. Viene dado por la anchura y altura del contenedor ('.circle-container'). Y posicionarlo como 'relative' para que sea referente de sus hijos.

A continuación colocamos todos los enlaces con sus imágenes centrados en su caja padre, tanto en la horizontal como la vertical. Habiendo definido el mismo tamaño para todas ellas.

El padding del contenedor principal es para que las imágenes queden contenidas dentro de él en su totalidad. Recuerda que el modelo de caja en el ejemplo es el tradicional. Su valor es función del tamaño de las imágenes (= link que las contiene).

El Css del desplazamiento

Lo siguiente a decidir es el ángulo en el que queremos colocar cada uno de los enlaces (con su imagen dentro) y declararle su clase correspondiente del tipo class='degNº', donde Nº se sustituye por el valor del ángulo deseado para cada uno: 0, 45, 90... étc

Como indicaba antes, en el apartado del marcado html, estas clases se podrían evitar y usar los selectores de número de elemento.

Y vamos con la magia Css para desplazar de forma sencilla y sin cálculos añadidos cada elemento formando un círculo alrededor del central. Para ello construimos una declaración del tipo:

El efecto del esta declaración es el que ves en el gif del inicio del artículo. O puedes verlo en código vivo aquí.

Vamos con una breve explicación de ésta declaración:
rotate(ángulo_deseado): esta primera transformación gira sobre sí mismo al elemento el ángulo deseado y a la vez también el eje de traslación o línea sobre la que se desplaza del centro al exterior (su eje X).
translate(radio): en nuestro ejemplo el valor 'radio' serían los 12em (mitad del tamaño de la caja padre) que es la distancia desde el centro a la que queremos situarlo.
rotate(-ángulo_deseado): con esta tercera transformación, cuyo valor es el de la primera pero con signo negativo, compensamos el giro sobre el propio elemento para "enderezarlo".

Así que aplicando esta fórmula a nuestro ejemplo quedaría así:

Todo lo anterior puesto junto a trabajar puedes verlo en:

Si por alguna razón, por ejemplo estética, quieres que las imágenes queden "mirando al centro", esto es, giradas sobre sí mismas, sólo tienes que prescindir de la última rotación compensatoria.

Créditos y autorías

Kseso

the obCSServer ᛯ Ramajero Argonauta, Enredique Amanuense de CSS.
#impoCSSible inside
Dicen que, en español, EsCss es el mejor blog de CSS. Posíblemente exageren.
@Kseso EsCss Kseso