3D CSS + floated elements - floats are above 3D transformations

I'm working on a little calendar thing, with 3D transforms/transitions on the dates. When you hover, they should open like a little door. I've got this much working perfectly.

Here's my issue: in the calendar, the dates from the next row overlap the little door effect. Basically, you can't see the bottom of the 3d effect. I made the overlapping lis translucent, so you can see that the bottom of the door is there, just obscured.

I don't think it's a z-index issue, but something with the floats. I'm totally open to positioning the calendar dates in an different way, but this is all I can think of for now.

Here's some jQuery that applies a descending z-index to the elements, but it doesn't do anything. Even if it did work, I have a feeling it would cut off the top of the door effect.

Here's a jsFiddle the shows everything in action. Remember to use Safari or Chrome.

 $('.cal ul li').each(function(index) {
     var days = $('.cal ul').children('li').size();
     $(this).css('z-index',days - index);
 });

Thanks! I hope I'm not getting ahead of myself with what 3D css transforms are capable of.

Edit

OK, I think I've got it. I adjusted the z-index on li:hover (the days), and that ensures that it'll be in the foreground. I ran into an issue with the borders of the lis being on top of the content.

To get around this, I adjusted it so there's a transition on the li, but not the li:hover. This way, there's a transition back to 2D, but not one when the 3D effect happens. The only thi开发者_如何学Gong being adjusted on the li:hover is the z-index. The actual 3D happens on the a inside of the li, so as long as the door closing effect is shorter than the z-index change, the border won't be visible through the door.

Here's an updated jsFiddle that shows everything. Please let me know if you spot any way to improve this further.

Try adding position:relative along with the z-index