CSS перевернутый блок взаимодействия с не переворачивается, только WebKit конкретных

ОКЕЙ, простой CSS флипCSS перевернутый блок взаимодействия с не переворачивается, только WebKit конкретных

.container 
    .flipper.A 
    .front 
    .back 
    .flipper.B 
    .front 
    .back

это важно для меня, что .front и .back оба имеют отрицательную top и left абсолютное положение и .flipper размеры является 0x0

, когда flipper A повернут на 180 градусов, поэтому видна .back, он неправильно взаимодействует с другим .flippers, если их позиции пересекаются ЭСТ. Например, я нажимаю ссылки в flipper B, но не могу нажимать на ссылки в flipper A, если A больше B

рабочий пример здесь http://jsfiddle.net/attenzione/g2at2/ - вы почти можете нажать на тест 1, вместо этого нажмите на тест 3

такая ситуация появляется только на WebKit браузер

любая помощь с этим? это ошибка webkit?

источник

2013-11-29 Attenzione

Просто принести DIV, что вы хотите быть впереди по направлению вперед (в 3D пространстве)

CSS

div.flipped { 
    -webkit-transform: rotateY(180deg) translateZ(-1px); 
    z-index: 2; 
}

translateZ перемещает его к вам

corrected fiddle

источник

2013-11-29 17:46:28 vals

thanx много! это ошибка webkit или моя проблема? потому что ff отлично работает Кстати, ваша скрипка не исправлена, может быть, пропустили, чтобы сохранить? но получил ваш ответ без него – Attenzione

Я думаю, что в базе есть небольшая ошибка webkit. В webkit, когда вы поворачиваете что-то на 180 градусов по оси x или y, вращение немного. Это приводит к тому, что вращающийся элемент также может быть «вниз». Я догадываюсь, что, но я считаю, что это происходит из-за нескольких странных поведений такого рода. По крайней мере, в этом аспекте ff работает лучше. И ты прав, забыл сохранить мои правки ... – vals

Есть ли причина, почему ваш внутренний блок имеет абсолютное позиционирование? Именно это и вызывает проблему. Если вы должны использовать абсолютное позиционирование во внутреннем блоке, есть два способа обойти это.

Вы может перелиться скрытый внешний элемент (.flipper) Или вы могли бы добавить указатель событий: ни на unflipped элемент, имейте в виду, что это работает только обратно в IE9

Вы должны действительно стараться не использовать абсолютное позиционирование, хотя оно не требуется.

источник

2013-11-29 17:32:13

жаль , .block действительно должны быть абсолютными позициями с отрицательным верхним и левым – Attenzione

CSS перевернутый блок взаимодействия с не переворачивается, только WebKit конкретных

ответ

Смежные вопросы