Добрый день уважаемые. Вот задался вопросом, как организовать "перекрытие веером" Объясню на примере
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style type="text/css">
.secondCandy{
float: left;
position: relative;
margin-top: 1%;
margin-left: 10%;
width: 200px;
height: 100%;
/*border: 1px solid black;*/
}
.circLelollipop{
position: relative;
width: 180px;
height: 180px;
border-radius: 50%;
background-color: black;
}
.sliceCandy{
position: absolute;
top: 26.5%;
left: 2.5%;
width: 86.4px;
height: 86.4px;
border-radius: 50%;
transform-origin: right center;
}
.sliceCandy:nth-child(even){
background-color: white;
}
.sliceCandy:nth-child(odd){
background-color: red;
}
.piece_1{
transform: rotate(0deg);
z-index: 1;
}
.piece_2{
transform: rotate(30deg);
z-index: 2;
}
.piece_3{
transform: rotate(60deg);
z-index: 3;
}
.piece_4{
transform: rotate(90deg);
z-index: 4;
}
.piece_5{
transform: rotate(120deg);
z-index: 5;
}
.piece_6{
transform: rotate(150deg);
z-index: 6;
}
.piece_7{
transform: rotate(180deg);
z-index: 7;
}
.piece_8{
transform: rotate(210deg);
z-index: 8;
}
.piece_9{
transform: rotate(240deg);
z-index: 9;
}
.piece_10{
transform: rotate(270deg);
z-index: 10;
}
.piece_11{
transform: rotate(300deg);
z-index: 11;
}
.piece_12{
transform: rotate(330deg);
z-index: 12;
}
</style>
</head>
<body>
<div class="secondCandy">
<div class="circLelollipop">
<div class="sliceCandy piece_1"></div>
<div class="sliceCandy piece_2"></div>
<div class="sliceCandy piece_3"></div>
<div class="sliceCandy piece_4"></div>
<div class="sliceCandy piece_5"></div>
<div class="sliceCandy piece_6"></div>
<div class="sliceCandy piece_7"></div>
<div class="sliceCandy piece_8"></div>
<div class="sliceCandy piece_9"></div>
<div class="sliceCandy piece_10"></div>
<div class="sliceCandy piece_11"></div>
<div class="sliceCandy piece_12"></div>
</div>
</div>
</body>
</html>
Мне необходимо организовать перекрытие лепестков леденца, но так, что б последний лепесток оказался ПОД первым иначе говоря так
