I currently have 4 overlapping divs arranged in a cover flow style. You can view an example HERE.
Although I have successfully stacked them one over another, I am facing three main issues with the z-index:
- Only the first div (#product-image) responds to click events while the other 3 do not.
- My attempt to toggle the perspective view smoothly is not working as expected.
- Despite specifying the wrapper's width and setting margin:0 auto, the entire cover flow is not centered.
I tried following this relevant SO answer CSS: Overlapping DIVs issue, but it only solved the problem for up to 3 divs, which does not apply to my scenario.
Below is the structure:
HTML<div class="product-download">
<div id="product-image">
<img src="http://placehold.it/300x216" />
</div>
<div id="in-situ-image">
<img src="http://placehold.it/300x216" />
</div>
<div id="product-flyer">
<img src="http://placehold.it/300x216" />
</div>
<div id="data-sheet">
<img src="http://placehold.it/300x216" />
</div>
</div>
body {
overflow:hidden;
width:100%;
margin:0 auto;
}
.product-download {
position:relative;
width:934px;
height:397px;
}
.product-download > div {
position:absolute;
display:inline-block;
}
#product-image {
z-index:6;
}
#in-situ-image {
-webkit-transform: perspective(600px) rotateY(-30deg) translateZ(-100px);
z-index:5;
left:120px;
}
#product-flyer {
-webkit-transform: perspective(600px) rotateY(-30deg) translateZ(-100px);
z-index:4;
left:265px;
}
#data-sheet {
-webkit-transform: perspective(600px) rotateY(-30deg) translateZ(-100px);
z-index:3;
left:410px;
}
$(".product-download div").click(function () {
alert(this.id);
$(this).fadeTo('slow').css('-webkit-transform', 'perspective( 0px ) rotateY( 0deg ) translateZ(0px)');
$(this).prevAll().fadeTo('slow').css('-webkit-transform', 'perspective( 600px ) rotateY( 30deg ) translateZ(-100px)');
$(this).nextAll().fadeTo('slow').css('-webkit-transform', 'perspective( 600px ) rotateY( -30deg ) translateZ(-100px)');
});