Fleur de paradoxe CSS z-index

Je voudrais créer un effet paradoxal via la propriété z-index CSS .

Dans mon code, j'ai cinq cercles, comme dans l'image ci-dessous, et ils sont tous positionnés de manière absolue sans définition z-index. Par conséquent, par défaut, chaque cercle chevauche le précédent.

À l'heure actuelle, le cercle 5 chevauche le cercle 1 (image de gauche). Le paradoxe que j'aimerais réaliser est d'avoir, en même temps, le cercle 1 sous le cercle 2 et au-dessus du cercle 5 (comme sur l'image de droite).

_{(source: schramek.cz )}

Voici mon code

Balisage:

<div class="item i1">1</div>
<div class="item i2">2</div>
<div class="item i3">3</div>
<div class="item i4">4</div> 
<div class="item i5">5</div>

CSS

.item {
    width: 50px;
    height: 50px;
    line-height: 50px;
    border: 1px solid red;
    background: silver;
    border-radius: 50%;
    text-align: center;
}

.i1 { position: absolute; top: 30px; left: 0px; }
.i2 { position: absolute; top: 0px; left: 35px; }
.i3 { position: absolute; top: 30px; left: 65px; }
.i4 { position: absolute; top: 70px; left: 50px; }
.i5 { position: absolute; top: 70px; left: 15px; }

Un exemple en direct est également disponible sur http://jsfiddle.net/Kx2k5/ .

J'ai essayé beaucoup de techniques avec l'empilement des commandes, l'empilement du contexte, etc. J'ai lu quelques articles sur ces techniques, mais sans succès. Comment puis-je resoudre ceci?

Voici ma tentative: http://jsfiddle.net/Kx2k5/1/
(testé avec succès sur Fx27, Ch33, IE9, Sf5.1.10et Op19)

CSS

.item {
   /* include borders on width and height */  
   -webkit-box-sizing : border-box;
   -moz-box-sizing    : border-box;
   box-sizing         : border-box;
   ...
}

.i1:after {
   content: "";

   /* overlap a circle over circle #1 */
   position : absolute;
   z-index  : 1;
   top      : 0;
   left     : 0;
   height   : 100%;
   width    : 100%;

   /* inherit border, background and border-radius */
   background    : inherit;
   border-bottom : inherit;
   border-radius : inherit;

   /* only show the bottom area of the pseudoelement */
   clip          : rect(35px 50px 50px 0);
}

Fondamentalement, j'ai superposé un :afterpseudo-élément sur le premier cercle (avec certaines propriétés héritées), puis je l'ai découpé avec une clip()propriété, donc je ne fais que sa section inférieure visible (où le cercle #1chevauche le cercle #5).

Pour les propriétés CSS que j'ai utilisé ici, cet exemple devrait fonctionner même sur IE8 ( box-sizing, clip(), inheritet pseudoelements y sont pris en charge)

Capture d'écran de l'effet résultant

Ma tentative utilise également clip. L'idée était d'en avoir la moitié et la moitié pour le div. De cette façon, le réglage z-indexfonctionnerait.

Ainsi, vous pouvez définir la partie supérieure sur z-index: -1et la partie inférieure sur z-index: 1.

Résultat:

.item {
  width: 50px;
  height: 50px;
  line-height: 50px;
  border: 1px solid red;
  background: silver;
  border-radius: 50%;
  text-align: center;
}
.under {
  z-index: -1;
}
.above {
  z-index: 1;
  overflow: hidden;
  clip: rect(30px 50px 60px 0);
}
.i1 {
  position: absolute;
  top: 30px;
  left: 0px;
}
.i2 {
  position: absolute;
  top: 0px;
  left: 35px;
}
.i3 {
  position: absolute;
  top: 30px;
  left: 65px;
}
.i4 {
  position: absolute;
  top: 70px;
  left: 50px;
}
.i5 {
  position: absolute;
  top: 70px;
  left: 15px;
}

<div class="item i1 under">1</div>
<div class="item i1 above">1</div>
<div class="item i2">2</div>
<div class="item i3">3</div>
<div class="item i4">4</div>
<div class="item i5">5</div>

DÉMO ICI

Remarque: testé sur IE 10+, FF 26+, Chrome 33+ et Safari 5.1.7+.

Voici mon essai.

J'utilise également un pseudo élément positionné au-dessus du premier cercle, mais plutôt que d'utiliser le clip, je garde son arrière-plan transparent et je lui donne juste une ombre-boîte en médaillon qui correspond à la couleur de fond des cercles (argent) ainsi qu'un rouge bordure pour couvrir les côtés inférieurs droit de la bordure du cercle.

Démo

CSS (qui est différent du point de départ)

.i1 { 
  position: absolute; top: 30px; left: 0px;
  &:before {
    content: '';
    position: absolute;
    z-index: 100;
    top: 0;
    left: 0;
    width: 50px;
    height: 50px;
    border-radius:  50%;
    box-shadow: inset 5px -5px 0 6px silver;
    border-bottom: solid 1px red;
  }
}

Produit final

Malheureusement, ce qui suit n'est qu'une réponse théorique, car pour une raison quelconque, je ne peux pas me rendre -webkit-transform-style: preserve-3d;au travail (je dois faire une erreur évidente, mais je n'arrive pas à la comprendre). Quoi qu'il en soit, après avoir lu votre question, je me suis demandé - comme pour tout paradoxe - pourquoi ce n'est qu'une impossibilité apparente, plutôt qu'une réelle. Encore quelques secondes, je me rends compte que dans la vraie vie, les feuilles tournent un peu, permettant ainsi à une telle chose d'exister. Alors j'ai voulu concocter une simple démonstration de la technique, mais sans la propriété précédente c'est impossible (elle est attirée vers le calque parent plat). Quoi qu'il en soit, voici le code de base néanmoins

<div class="container">
    <div>
        <div class="i1 leaf">
            <div class="item">1</div>
        </div>
        <div class="i2 leaf">
            <div class="item">2</div>
        </div>
        <div class="i3 leaf">
            <div class="item">3</div>
        </div>
        <div class="i4 leaf">
            <div class="item">4</div>
        </div>
        <div class="i5 leaf">
            <div class="item">5</div>
        </div>
    </div>
</div>

Et le css:

.i1 {
    -webkit-transform:rotateZ(288deg)
}
.i2 {
    -webkit-transform:rotateZ(0deg)
}
.i3 {
    -webkit-transform:rotateZ(72deg)
}
.i4 {
    -webkit-transform:rotateZ(144deg)
}
.i5 {
    -webkit-transform:rotateZ(216deg)
}
.leaf { 
    position:absolute;
    left:35px;
    top:35px;
}
.leaf > .item {
    -webkit-transform:rotateY(30deg) translateY(35px)
}

Et vous pouvez trouver le code complet ici .

JS Fiddle

HTML

<div class="item i1">1</div>
<div class="item i2">2</div>
<div class="item i3">3</div>
<div class="item i4">4</div>
<div id="five">5</div>
<div class="item2 i5"></div>
<div class="item3 i6"></div>

CSS

.item {
    width: 50px;
    height: 50px;
    line-height: 50px;
    border: 1px solid red;
    background: silver;
    border-radius: 50%;
    text-align: center;
}
.item2 {
      width: 25px;
    height: 50px;
    line-height: 50px;
    border: 1px solid red;
    border-right: none;
    border-radius: 50px 0 0 50px;
    background: silver 50%;
    background-size: 25px;
    text-align: center;   
        z-index: -3;
}
.item3 {
    width: 25px;
    height: 50px;
    line-height: 50px;
    border: 1px solid red;
    border-left: none;
    border-radius: 0 50px 50px 0;
    background: silver 50%;
    background-size: 25px;
    text-align: center;    
}
.i1 {
    position: absolute;
    top: 30px;
    left: 0px;
}
.i2 {
    position: absolute;
    top: 0px;
    left: 35px;
}
.i3 {
    position: absolute;
    top: 30px;
    left: 65px;
}
.i4 {
    position: absolute;
    top: 70px;
    left: 55px;
}
.i5 {
    position: absolute;
    top: 70px;
    left: 15px;
}
.i5 {
    position: absolute;
    top: 72px;
    left:19px;

}
.i6 {
    position: absolute;
    top: 72px;
    left: 44px;
}
#five {
     position: absolute;
    top: 88px;
    left: 40px;
    z-index: 100;
}

DÉMO EN DIRECT DE JS Fiddle

Fonctionne aussi sur IE8.

HTML

<div class="half under"><div class="item i1">1</div></div>
<div class="half above"><div class="item i1">1</div></div>
<div class="item i2">2</div>
<div class="item i3">3</div>
<div class="item i4">4</div> 
<div class="item i5">5</div>

CSS

.item {
    width: 50px;
    height: 50px;
    line-height: 50px;
    border: 1px solid red;
    background: silver;
    border-radius: 50%;
    text-align: center;
}
.half {
    position: absolute;
    overflow: hidden;
    width: 52px;
    height: 26px;
    line-height: 52px;
    text-align: center;
}
.half.under {
    top: 30px; 
    left: 0px;
    z-index: -1;
    border-radius: 90px 90px 0 0;
}
.half.above {
    top: 55px;
    left: 0px;
    z-index: 1;
    border-radius: 0 0 90px 90px;
}
.half.above .i1 { margin-top:-50%; }
.i2 { position: absolute; top: 0px; left: 35px;}
.i3 { position: absolute; top: 30px; left: 65px;}
.i4 { position: absolute; top: 70px; left: 50px; }
.i5 { position: absolute; top: 70px; left: 15px; }