我试图制作一个圆形的相机快门,但是让它看起来正确时出现了问题。
这就是它的外观:
第一个“花瓣”应该低于最后一个,而要高于下一个。怎么做?
下面是我尝试过的:
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;
}Run Code Online (Sandbox Code Playgroud)
#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; …Run Code Online (Sandbox Code Playgroud)