Question

I’m learning to use CSS3 3D transforms, but I’m having trouble keeping elements which are transforming on top of all other elements.

This is what I have so far: http://bos.rggwebdesigns.com/

As you can see, the site follows standard z-index rules for the hierarchy of the three .row divs, meaning that cards in the first row are behind the card in the second row and so on.

I tried adding lines to the transform script (in main.js) which selects the .row element above the clicked .card element and sets its z-index to 1000, however that doesn’t seem to work.

$(document).ready(function() {
    $('.card').click(function() {
        $('.row').removeClass('top');
        $('.card').not(this).removeClass('flipped');
        $(this).parents().eq(2).toggleClass('top');
        $(this).toggleClass('flipped');
    })
});

To reiterate, I’m trying to ensure that all parts of a transforming element always appear above every other element.

Answer 1

According to what I see z-index needs to be relative. So if you set the position : relative; for class “row” that should solve your problem.

EDIT:
I was reviewing your code. You also need to change .row.top in css to .top