Fleur de paradoxe CSS z-index

Question

J'aimerais créer un effet paradoxal par le biais de l'option z-index CSS propriété.

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

Actuellement, le cercle 5 recouvre 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 sur le cercle 5 (comme dans l'image de droite).

_{(source : <a href="http://paradox.schramek.cz/1.jpg" rel="nofollow noreferrer">schramek.cz </a>)}

Voici mon code

Markup :

<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 à l'adresse suivante http://jsfiddle.net/Kx2k5/ .

J'ai essayé de nombreuses techniques avec des ordres d'empilage, des contextes d'empilage, etc. J'ai lu quelques articles sur ces techniques, mais sans succès. Comment puis-je résoudre ce problème ?

Answer 1

Voici ma tentative : http://jsfiddle.net/Kx2k5/1/
(testé avec succès sur Fx27 , Ch33 , IE9 , Sf5.1.10 y 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);
}

En fait, j'ai superposé un :after sur le premier cercle (avec certaines propriétés héritées), puis je l'ai découpé à l'aide de clip() Je ne rends donc visible que sa partie inférieure (là où le cercle #1 chevauche le cercle #5 ).

Pour les propriétés CSS que j'ai utilisées ici, cet exemple devrait fonctionner même sous IE8 ( box-sizing , clip() , inherit et les pseudo-éléments y sont pris en charge)

---

Capture d'écran de l'effet obtenu

Answer 2

Ma tentative aussi en utilisant clip . L'idée était de faire moitié-moitié pour les div . De cette manière, le réglage z-index fonctionnerait.

Vous pouvez donc définir la partie supérieure comme étant z-index: -1 et la partie inférieure à 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>

DEMO ICI

Nota: Testé sur IE 10+, FF 26+, Chrome 33+ et Safari 5.1.7+.

Answer 3

Voici mon essai.

J'utilise également un pseudo-élément positionné au-dessus du premier cercle, mais plutôt que d'utiliser un clip, je garde son arrière-plan transparent et je donne simplement la valeur

D

C

.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;
  }
}

F

Answer 4

Malheureusement, la suite est juste une réponse théorique, pour une raison que je ne peux pas obtenir de l' -webkit-transform-style: preserve-3d; de travail (avoir des erreur évidente, mais n'arrive pas à le comprendre). De toute façon, après la lecture de votre question, je suis à la avec tous paradoxe - se demande pourquoi c'est seulement une apparente impossibilité, plutôt que réelle. Un autre quelques secondes, je me rends compte que dans la vie réelle, les feuilles sont tourné un peu, permettant ainsi une telle chose existe. Alors j'ai voulu concocter une simple démonstration de la technique, mais sans la propriété, c'est impossible (il pénètre à l'appartement calque parent). De toute façon, ici, c'est le code de base n'en est pas moins

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

Answer 5

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;
}