I want to create a circular placement of divs around the parent's center point.
Like this:
What I have achieved right now was this:
https://codepen.io/wagnerpaz/pen/qBrYeKb
<html>
<body>
<div class="container">
<div class="item" style="width: 50px; height: 50px; background-color: red; transform: rotate(0deg)"></div>
<div class="item" style="width: 50px; height: 50px; background-color: black; transform: rotate(60deg)"></div>
<div class="item" style="width: 50px; height: 50px; background-color: blue; transform: rotate(120deg)"></div>
<div class="item" style="width: 50px; height: 50px; background-color: yellow; transform: rotate(180deg)"></div>
<div class="item" style="width: 50px; height: 50px; background-color: purple; transform: rotate(240deg)"></div>
<div class="item" style="width: 50px; height: 50px; background-color: gray; transform: rotate(300deg)"></div>
</div>
</body>
</html>
.container {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-color: green;
}
.item {
position: absolute;
left: 50%;
transform-origin: 50% 300%;
}
