CSS3 transform and z-indexes

[ideaprison]

Help me tame this bug in Safari please, in Chrome (uses Webkit like Safari) the page works fine.
The front of the box needs to stay on top of the albums but when you click an album then play makes it fly out, that should be on top of the front.

Still haven’t figured out a solution, is what i want to do impossible? (Currently getting it to work in just webkit browsers)

Here’s how it operates, you can flip (or click top/bottom) to go through the albums.
Click an album, then click it’s center to make it fly out, This albums should be **on top** of the .box-front

New version
http://jsfiddle.net/ideaprison/Tptxf/

Using the transform on the .box-front makes the .new albums when flipping pass through it.
http://jsfiddle.net/ideaprison/Tptxf/1/

Just with position:;
http://jsfiddle.net/ideaprison/NgmEJ/

Hope I made myself clear, else have a look using [Chrome] at saltyknuckles.net/archives/ to see how it should function.

Thanks all!

[ideaprison]

Thats okay, i will add that the more i kept trying to get it to work the messier it probably got.
if you check out http://www.saltyknuckles.net/archives/ in Chrome then you can see how it should work

[ideaprison]

—

[ideaprison]

—

[ideaprison]

Still haven’t figured out a solution, is what i want to do impossible? (Currently getting it to work in just webkit browsers)

Here’s how it operates, you can flip (or click top/bottom) to go through the albums.
Click an album, then click it’s center to make it fly out, This albums should be **on top** of the .box-front

New version
http://jsfiddle.net/ideaprison/Tptxf/

Using the transform on the .box-front makes the .new albums when flipping pass through it.
http://jsfiddle.net/ideaprison/Tptxf/1/

Just with position:;
http://jsfiddle.net/ideaprison/NgmEJ/

[captain lardnicus]

swap all references to preserve-3d with flat… i.e.

transform-style: preserve-3d;
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;

to

transform-style: flat;
-webkit-transform-style: flat;
-moz-transform-style: flat;

Although not ideal, and might cause other problems, that seems to be the simplest way to respect z-order.

[Author]

Posts