I've been attempting to create a circular camera shutter, but I'm facing difficulties in making it look accurate.
This is the desired outcome:
https://i.sstatic.net/oS7gT.jpg
The first 'petal' should be positioned lower than the last one and higher than the next. How can I achieve this effect?
Here's what I have experimented with so far:
let partAmount = 10;
let cont = document.getElementById('cont');
let parts = [];
for(let i = 1; i <= partAmount; i++){
let partCont = createElement('div','partCont');
let part = createElement('div','part');
parts.push(part);
partCont.appendChild(part);
cont.appendChild(partCont);
partCont.style.transform = 'rotate('+ 360 / partAmount * i+'deg) translatey(-250px)';
}
function createElement(tag,className){
let elem = document.createElement(tag);
elem.classList.add(className);
return elem;
}#cont{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
border-radius: 50%;
}
.dia{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
width: 300px;
height: 300px;
border-radius: 50%;
overflow: hidden;
}
.partCont{
position: absolute;
transform-origin: left top;
}
.part{
width: 500px;
height: 100px;
background-color: lightgray;
border-bottom: 3px solid gray;
box-sizing: border-box;
transform-origin: left bottom;
transform: rotate(60deg);
transition-duration: 1s;
}<div class="dia">
<div id="cont">
</div>
</div>