Menu
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);
}
793
The transform CSS property lets you rotate, scale, skew, or translate an element. It modifies the coordinate space of the CSS visual formatting model.
The :hover selector is used to select elements when you mouse over them. Tip: The :hover selector can be used on all elements, not only on links. Tip: Use the :link selector to style links to unvisited pages, the :visited selector to style links to visited pages, and the :active selector to style the active link.
Also, hover will not work if you use the wrong CSS format. Note that if you do not get the specificity right, the hover style will not work. Although you can use the ! important rule, there is no guarantee it will always work.
So, what's the difference between CSS Transform and CSS Transition? The Transform property in CSS moves or modifies the appearance of an element, whereas the Transition property seamlessly and gently transitions the element from one state to another.
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 :)
149
I had the same issue with only the top 50% of the link being hoverable and clickable, while the entire element was still visible. I fixed this by adding translateZ(1px) to my -webkit-transform. This brings the entire element in front of the Z-axis and makes it completely hoverable and clickable. There is however a 1px zoom with the translateZ, but it's unnoticeable. Until this issue is dealt with, this will have to do!
2
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
