Click here to Skip to main content
15,867,885 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
See more:
Hi everyone, I've been working on a HTML/CSS/JS script lately (I'm still rather beginner), aiming at creating a 5-branch star rotating colours from a single branch image. I defined the main
as 900*900px and included another div of dimensions 0*0px, supposed to mark the centre of the main div. The 5 branch images would then be centered on that central div with a 72° angle apart from each other. Ultimately, I would like to add a button in the centre (200*200px) that adds branches when you click onto it, using Java, but I'd like to first fix the problem of the branches not being centered, but rather scattered all over the page.
Would anyone kindly guide me on how to fix that, please?

What I have tried:

HTML:

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<link rel="stylesheet" type="text/css" href="dm.css">
	<title>Etoile</title>
</head>
<body>
	<div id="main">
		<div id="centre">
			<img src="branch.png" class="image" id="image1">
			<img src="branch.png" class="image" id="image2">
			<img src="branch.png" class="image" id="image3">
			<img src="branch.png" class="image" id="image4">
			<img src="branch.png" class="image" id="image5">
			<button id="bouton">
				Cliquer pour ajouter une branche
			</button>
		</div>
	</div>
</body>
</html>


--------

CSS:

main{
	font-family: "Montserrat", sans-serif;
}

div#main {
	width: 900px;
	height: 900px;
	display: flex;
	align-items: center;
	justify-content: center;

}

div#centre {
	width: 0px;
	height: 0px;
	top: 100px;
}

button#bouton{
	width: 200px;
	height: 200px;
	filter: drop-shadow(0px 0px 8px black);
	border: 1px black solid;
	border-top-left-radius: 100px;
	border-top-right-radius: 100px;
	border-bottom-left-radius: 100px;
	border-bottom-right-radius: 100px;
	position: absolute;
	left: 350px;
	bottom: 0px;
	z-index: 1;
}

img#image1 {
	width: 200px;
	bottom: 0px;
	left: -100px;
	z-index: 0;
	position: relative;
}

img#image2 {
	width: 200px;
	transform-origin: 0px 0px;
	transform: rotate(72deg);
	filter: hue-rotate(72deg);
	bottom: 0px;
	left: -100px;
	z-index: 0;
}

img#image3 {
	width: 200px;
	transform-origin: 0px 0px;
	transform: rotate(144deg);
	filter: hue-rotate(144deg);
	bottom: 0px;
	left: -100px;
	z-index: 0;
}

img#image4 {
	width: 200px;
	transform-origin: 0px 0px;
	transform: rotate(216deg);
	filter: hue-rotate(216deg);
	bottom: 0px;
	left: -100px;
	z-index: 0;
}

img#image5 {
	width: 200px;
	transform-origin: 0px 0px;
	transform: rotate(288deg);
	filter: hue-rotate(288deg);
	bottom: 0px;
	left: -100px;
	z-index: 0;
} 
Posted
Updated 13-Dec-21 22:33pm
v3

1 solution

How about something like this?
HTML
<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>
CSS
#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:
JavaScript
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[^]
 
Share this answer
 
v2

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900