Home/ Questions/Q 6712655
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-26T08:17:05+00:00

SOLVED – the problem is that doing a rotation puts half of the element

  • 0

SOLVED – the problem is that doing a rotation puts half of the element behind the neutral (zero) Z-axis for the webpage, and WebKit apparently doesn’t allow mouse events through that “neutral” plane. So changing the rotation point to the right/left edges of the panels solved it. Weird but for now it works.

I have a simple HTML5/CSS3 page with four panels. These panels use -webkit-transform to form them into a nice arrangement. On :hover, I use -webkit-transform to bring the panel up to the foreground. The code is below.

What happens is that the :hover action is unreliable. If I swipe the mouse over the panels, it’s common to stop moving the mouse with it hovering over a panel but the panel is still in its original position. Specifically, swiping from left to right, the leftmost two panels appear to work fine, but the rightmost two don’t scale up until the mouse is halfway across the panel.

What would cause this?

EDIT: Quick follow-up, it appears that links placed in the transformed elements will only be clickable on the leftmost (for the two left panels) or rightmost (for the two right panels) halves of the elements. In other words, the click zone is only active for the “closer” half of the element.

First, the HTML (minimal example):

<!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>

And the 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);
}
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Its seems to be a chrome bug, since if your remove the original perspective and only have it on the hover, it works perfect.

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

    What you could do then to make it work, could be createing an outer container which fills the perspective area and on the hover, give the inner element the hover effect.

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

    Awesome effect btw 🙂

    • 0