Home>

I tried to make a circular camera shutter camera, but I'm having trouble getting it to look realistic.

This is what it should look like:

Below is the code I tried:

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 element;
}
#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: light gray
  border-bottom: 3px solid grey;
  box-sizing: border-box;
  transform-origin: left bottom;
  transform: rotate(60deg);
  transition-duration: 1s;
}
<div class="dia">  <div id="cont">  </div></div>

The first "petal" should be lower than the last and higher than the next.

How to do it?

maybe try with translate3d /perspective?

ThisMan2022-01-16 12:11:38

@ThisMan try it. If the answer is on the level, a tick and pluses are guaranteed :-)

Alexandr_TT2022-01-16 12:11:38