Bunga paradoks indeks-z CSS

Saya ingin membuat efek paradoks melalui properti z-index CSS .

Dalam kode saya, saya memiliki lima lingkaran, seperti pada gambar di bawah, dan semuanya diposisikan secara mutlak tanpa ditentukan z-index. Oleh karena itu, secara default, setiap lingkaran tumpang tindih dengan yang sebelumnya.

Sekarang, lingkaran 5 tumpang tindih dengan lingkaran 1 (gambar kiri). Paradoks yang ingin saya capai adalah, pada saat yang sama, lingkaran 1 di bawah lingkaran 2 dan di atas lingkaran 5 (seperti pada gambar kanan).

_{(sumber: schramek.cz )}

Ini kode saya

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

Contoh langsung juga tersedia di http://jsfiddle.net/Kx2k5/ .

Saya mencoba banyak teknik dengan perintah susun, konteks susun, dan sebagainya. Saya membaca beberapa artikel tentang teknik ini, tetapi tidak berhasil. Bagaimana saya bisa memecahkan masalah ini?

Berikut upaya saya: http://jsfiddle.net/Kx2k5/1/
(berhasil diuji pada Fx27, Ch33, IE9, Sf5.1.10dan 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);
}

Pada dasarnya saya telah tumpang tindih :afterpseudoelement di atas lingkaran pertama (dengan beberapa properti yang diwarisi), lalu saya telah memotongnya dengan clip()properti, jadi saya hanya membuat bagian bawahnya terlihat (di mana lingkaran #1tumpang tindih dengan lingkaran #5).

Untuk properti CSS yang saya gunakan di sini, contoh ini harus bekerja bahkan pada IE8 ( box-sizing, clip(), inherit, dan pseudoelements didukung di sana)

Tangkapan layar dari efek yang dihasilkan

Upaya saya juga menggunakan clip. Idenya adalah memiliki setengah dan setengah untuk div. Setting seperti itu z-indexakan berhasil.

Jadi Anda bisa mengatur bagian atas ke z-index: -1dan bawah ke z-index: 1.

Hasil:

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

Catatan: Diuji di IE 10+, FF 26 +, Chrome 33+, dan Safari 5.1.7+.

Inilah tujuan saya.

Saya juga menggunakan elemen semu yang diposisikan di atas lingkaran pertama, tetapi daripada menggunakan klip, saya menjaga latar belakangnya transparan dan hanya memberikannya sebuah kotak-bayangan sisipan yang cocok dengan warna latar belakang lingkaran (perak) serta merah perbatasan untuk menutupi sisi kanan bawah dari batas lingkaran.

Demo

CSS (yang berbeda dari titik awal)

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

Produk akhir

Sayangnya, berikut ini hanyalah jawaban teoritis, karena untuk beberapa alasan saya tidak bisa -webkit-transform-style: preserve-3d;bekerja (harus membuat kesalahan yang jelas, tetapi sepertinya tidak bisa memahaminya). Either way, setelah membaca pertanyaan Anda, saya - seperti halnya setiap paradoks - bertanya-tanya mengapa itu hanya kemustahilan yang tampak, daripada yang nyata. Beberapa detik lagi saya menyadari bahwa dalam kehidupan nyata daunnya diputar sedikit, sehingga memungkinkan hal seperti itu ada. Jadi saya ingin membuat demonstrasi sederhana dari teknik ini, tetapi tanpa properti sebelumnya itu tidak mungkin (itu akan ditarik ke lapisan induk datar). Bagaimanapun, berikut adalah kode dasarnya

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

Dan cssnya:

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

Dan Anda dapat menemukan kode lengkapnya di sini .

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

JS Fiddle DEMO LANGSUNG

Bekerja di IE8 juga.

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