How about something like this?
<div id="main">
<div id="centre" style="--branch-count:5;">
<div style="--image-number:0;"><img src="branch.png" class="image"></div>
<div style="--image-number:1;"><img src="branch.png" class="image"></div>
<div style="--image-number:2;"><img src="branch.png" class="image"></div>
<div style="--image-number:3;"><img src="branch.png" class="image"></div>
<div style="--image-number:4;"><img src="branch.png" class="image"></div>
<button id="bouton">
Cliquer pour ajouter une branche
</button>
</div>
</div>
#main {
width: 900px;
height: 900px;
display: flex;
align-items: center;
justify-content: center;
}
#centre {
position: relative;
}
#bouton {
width: 200px;
height: 200px;
filter: drop-shadow(0px 0px 8px black);
border: 1px black solid;
border-radius: 100px;
z-index: 1;
}
#centre > div {
position: absolute;
z-index: 0;
--angle: calc(90deg + var(--image-number) * 360deg / var(--branch-count));
transform: rotate(var(--angle)) translate(-240px, 0);
}
.image {
transform: rotate(calc(-1 * var(--angle)));
filter: hue-rotate(var(--angle));
border-radius: 15px;
}
Demo[
^]
Using CSS custom properties (variables) - CSS: Cascading Style Sheets | MDN[
^]
To insert branches from Javascript, you can use:
window.addEventListener('DOMContentLoaded', () => {
const centre = document.getElementById("centre");
let branchCount = 0;
centre.querySelectorAll(":scope > div").forEach(el => {
el.style.setProperty("--image-number", branchCount);
++branchCount;
});
centre.style.setProperty("--branch-count", branchCount);
document.getElementById("bouton").addEventListener("click", (event) => {
event.preventDefault();
const imageNumber = branchCount;
const html = `<div style="--image-number:${imageNumber};"><img src="branch.png" class="image"></div>`;
centre.insertAdjacentHTML("afterbegin", html);
++branchCount;
centre.style.setProperty("--branch-count", branchCount);
});
});
Demo[
^]