CSS-преобразования и свойство наведения - PullRequest
Новая
       28

CSS-преобразования и свойство наведения

4 голосов
/ 14 октября 2011

решено - проблема в том, что при повороте половина элемента помещается за нейтральной (нулевой) осью Z для веб-страницы, а WebKit, по-видимому, не пропускает события мыши через этот "нейтральный"самолет.Так что изменение точки поворота на правый / левый края панелей решило это.Странно, но пока это работает.

У меня есть простая страница HTML5 / CSS3 с четырьмя панелями.Эти панели используют -webkit-transform, чтобы сформировать их в удобное расположение.На: hover, я использую -webkit-transform, чтобы вывести панель на передний план.Код ниже.

В результате действие: hover ненадежно.Если я проводю мышью по панелям, обычно перестают перемещать мышь, когда она находится над панелью, но панель все еще находится в своем первоначальном положении.В частности, проведя пальцем слева направо, две крайние левые панели работают нормально, но две самые правые не масштабируются до тех пор, пока мышь не переместится на половину панели.

Что может вызвать это?

РЕДАКТИРОВАТЬ: быстрое отслеживание, кажется, что ссылки, размещенные в преобразованных элементах, будут кликабельны только в самой левой (для двух левых панелей) или крайней правой (для двух правых) половинах элементов.Другими словами, зона щелчка активна только для «ближе» половины элемента.

Во-первых, HTML (минимальный пример): 

<!DOCTYPE html>
<html lang="en">
<head>
    <link rel="stylesheet" type="text/css" href="test.css" />
</head>
<body>
<section id="test">
    <article class="tr_left"></article>
    <article class="tr_midleft"></article>
    <article class="tr_midright"></article>
    <article class="tr_right"></article>
</section>
</body>
</html>

И CSS: 

#test article {
    display: inline-block;
    height: 150px;
    width: 160px;
    background-color: blue;
    -webkit-transition: -webkit-transform 0.2s ease;
}

#test article.tr_left {
    -webkit-transform: perspective(400px) rotateY(20deg) scale(1);
}

#test article.tr_midleft {
    -webkit-transform: perspective(400px) rotateY(8deg) scale(0.9);
}

#test article.tr_midright {
    -webkit-transform: perspective(400px) rotateY(-8deg) scale(0.9);
}

#test article.tr_right {
    -webkit-transform: perspective(400px) rotateY(-20deg) scale(1);
}

#test article:hover, #test article:active {
    -webkit-transform: perspective(400px) scale(1.2);
}

Ответы [ 2 ]

4 голосов
/ 14 октября 2011

Кажется, это хромированная ошибка, поскольку, если вы удалите исходную перспективу и оставите ее только при наведении, она прекрасно работает.

(ex http://jsfiddle.net/mMYrf/1/)

Что вы могли бызатем сделайте так, чтобы это работало, возможно, создайте внешний контейнер, который заполняет область перспективы и наведите курсор мыши, дайте внутреннему элементу эффект наведения.

(напр. http://jsfiddle.net/mMYrf/2/)

Удивительноэффект между прочим:)

2 голосов
/ 01 ноября 2011

У меня была такая же проблема: только верхние 50% ссылки были доступны для поиска и нажатия, в то время как весь элемент был виден.Я исправил это, добавив translateZ (1px) в мой -webkit-transform.Это помещает весь элемент перед осью Z и делает его полностью перемещаемым и активным.Однако с translateZ есть 1-кратный зум, но это незаметно.Пока эта проблема не будет решена, это придется делать!

...