Grow your CSS skills. Land your dream job.

CSS3 transform and z-indexes

  • # October 22, 2012 at 9:48 am

    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!

    # October 22, 2012 at 10:01 am

    Hi there,

    I see your problem…As I am still fuzzy on how the whole thing works, all I can do is remind you that position: absolute will tell the rest of the page to act as if that element is not there. I think Chrome must be smart enough to remember that even though the rest of the page is ignoring it, it will still apply z-index. However, Safari is complying to CSS…this is just normal. I suggest maybe using position: relative to achieve the same positioning.

    Sorry if I’m not being any help–don’t understand the project very well, but it sure looks kickin’!

    Red

    # October 22, 2012 at 10:03 am

    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

    # October 22, 2012 at 12:46 pm

    # October 23, 2012 at 6:21 am

    # October 25, 2012 at 6:28 am

    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/

Viewing 6 posts - 1 through 6 (of 6 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".