Я работаю над небольшим календарным событием с трехмерными преобразованиями / переходами в датах. Когда вы парите, они должны открыться, как маленькая дверь. У меня все отлично работает.
Вот моя проблема: в календаре даты из следующего ряда перекрывают эффект маленькой двери. По сути, вы не можете видеть дно трехмерного эффекта. Я сделал перекрывающиеся li
с полупрозрачными, чтобы вы могли видеть, что нижняя часть двери там , просто затенена.
Я не думаю, что это проблема z-index, но что-то с поплавками. Я полностью открыт для позиционирования календарных дат по-другому, но это все, что я могу думать сейчас.
Вот несколько jQuery, которые применяют нисходящий z-индекс к элементам, но ничего не делают. Даже если бы это сработало, у меня есть ощущение, что оно отключит top эффекта двери.
Вот jsFiddle, который показывает все в действии. Не забудьте использовать Safari или Chrome.
$('.cal ul li').each(function(index) {
var days = $('.cal ul').children('li').size();
$(this).css('z-index',days - index);
});
Спасибо! Я надеюсь, что я не буду забегать вперед с тем, на что способны трехмерные CSS-преобразования.
Редактировать
Хорошо, я думаю, что понял. Я настроил z-index на li:hover
(дни), и это гарантирует, что он будет на переднем плане. Я столкнулся с проблемой с границами li
над содержимым.
Чтобы обойти это, я настроил так, что есть переход на li
, но не на li:hover
. Таким образом, есть переход назад в 2D, но не один, когда происходит эффект 3D. Единственное, что настраивается на li:hover
, это z-индекс. Фактическое 3D происходит в a
внутри li
, поэтому, пока эффект закрытия двери короче, чем изменение z-индекса, граница не будет видна через дверь.
Вот обновленный jsFiddle , который показывает все. Пожалуйста, дайте мне знать, если вы найдете какой-либо способ улучшить это.