Currently, I am in the process of familiarizing myself with CSS3 3D transforms. However, I am encountering difficulties in keeping elements that are undergoing transformation on top of other elements.
If you'd like to take a look at what I have accomplished so far, here is the link:
The website adheres to the standard z-index rules regarding the hierarchy of the three .row divs. This means that the cards in the first row will be positioned behind the card in the second row, and so forth.
In an attempt to address this issue, I made modifications to the transform script (located in main.js). The updated script selects the .row element above the clicked .card element and assigns it a z-index of 1000. However, this solution does not seem to be effective.
$(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, my objective is to ensure that every part of a transforming element consistently appears above all other elements on the page.