3D CSS + плавающие элементы - плавающие над 3D трансформациями - PullRequest
3 голосов
/ 12 июня 2011

Я работаю над небольшим календарным событием с трехмерными преобразованиями / переходами в датах. Когда вы парите, они должны открыться, как маленькая дверь. У меня все отлично работает.

Вот моя проблема: в календаре даты из следующего ряда перекрывают эффект маленькой двери. По сути, вы не можете видеть дно трехмерного эффекта. Я сделал перекрывающиеся 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 , который показывает все. Пожалуйста, дайте мне знать, если вы найдете какой-либо способ улучшить это.

1 Ответ

0 голосов
/ 12 июня 2011

Попробуйте добавить position:relative вместе с z-index

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...