Geek Answers Handbook

CSS Transformation and Hover Property

SOLVED - The problem is that performing a rotation puts half the element behind the neutral (zero) Z-axis for the web page, and WebKit does not seem to allow mouse events through this “neutral” plane. Thus, changing the pivot point to the right / left edges of the panels solved this problem. Strange, but for now it works.

I have a simple four-panel HTML5 / CSS3 page. These panels use -webkit-transform to form them in a convenient location. On: hover, I use -webkit-transform to bring the panel to the foreground. The code is below.

It happens that the action: hover is unreliable. If I push the mouse over the panels, the mouse usually stops moving when it hangs over the panel, but the panel is still in its original position. In particular, scrolling from left to right, the leftmost two panels look great, but the rightmost two do not scale until the mouse is halfway across the panel.

What can cause this?

EDIT: Quick observation, it seems that links placed in the converted elements will only be available on the left side (for the two left panels) or to the right (for the two right panels) of the element halves. In other words, the click zone is only active for the “closer” half of the element.

First, 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 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); }
+4
source share
2 answers

This seems to be a chrome error, because if you delete the original perspective and only have it when you hover, it works fine.

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

What you could do to make it work, you can create an external container that fills the perspective area and guidance, gives the internal element a guidance effect.

(e.g. http://jsfiddle.net/mMYrf/2/ )

Amazing btw effect :)

+4
source

I had the same problem when only 50% of the links were overhanging and clickable, while the whole element was still visible. I fixed this by adding translateZ (1px) to my -webkit-transform. This brings the whole element in front of the Z axis and makes it completely hovering and interactive. However, there is 1px zoom with translateZ, but it's invisible. Until this issue is considered, it will need to be done!

+2
source

More articles:


All Articles