Javascript-форум - Перекрытие элементов.

Javascript-форум (https://javascript.ru/forum/)

- (X)HTML/CSS (https://javascript.ru/forum/xhtml-html-css/)

- - Перекрытие элементов. (https://javascript.ru/forum/xhtml-html-css/66042-perekrytie-ehlementov.html)

Перекрытие элементов.

Добрый день уважаемые. Вот задался вопросом, как организовать "перекрытие веером" Объясню на примере

<!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>

Мне необходимо организовать перекрытие лепестков леденца, но так, что б последний лепесток оказался ПОД первым иначе говоря так

Правильный ответ: DOM не предназначен для рисования.
Просто ответ: никак.
Ответ-альтернатива: использовать прозрачные элементы с box-shadow: inset.

можно немного лепестки наклонить с помощью 3d
как лопасти турбины
один край всегда будет выше - другой ниже
css в примере только для webkit - Хром, Опера и т.д.

<!DOCTYPE html>
<head>
	<meta charset="UTF-8">
	<style>
      .secondCandy{
          width: 180px;
          height: 180px;
          background-color: black;
          border-radius: 50%;
      }

      .circLelollipop{
          position: relative;
          width: 180px;
          height: 180px;
          transform-style: preserve-3d; 
      }

      .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: rotateZ(0) rotateX(30deg);
      }
      .piece_2{
          transform: rotateZ(30deg) rotateX(30deg);
      }
      .piece_3{
          transform: rotateZ(60deg) rotateX(30deg);
      }
      .piece_4{
          transform: rotateZ(90deg) rotateX(30deg);
      }
      .piece_5{
          transform: rotateZ(120deg) rotateX(30deg);
      }
      .piece_6{
          transform: rotateZ(150deg) rotateX(30deg);
      }
      .piece_7{
          transform: rotateZ(180deg) rotateX(30deg);
      }
      .piece_8{
          transform: rotateZ(210deg) rotateX(30deg);
      }
      .piece_9{
          transform: rotateZ(240deg) rotateX(30deg);
      }
      .piece_10{
          transform: rotateZ(270deg) rotateX(30deg);
      }
      .piece_11{
          transform: rotateZ(300deg) rotateX(30deg);
      }
      .piece_12{
          transform: rotateZ(330deg) rotateX(30deg);
      }

	</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>

Pavel M. , спасибо, за совет

В фурифокс так не получится.

у них вроде баг был
здесь наглядно http://stackoverflow.com/questions/1...nstead-of-clip

надеюсь исправят со временем :-)

Ещё раз всем спасибо. :thanks:
Результат
http://codepen.io/BlackStar1991/pen/YpVjZB

Если не используется IE8-, то можно на svg такие штуки лепить