CODEWITHSUNDEEP
csscss-transforms
Joe Morgan
Joe Morgan

Reputation: 33

CSS3D Transforms: Losing element interactivity

I'm creating a 3D cube that can be rotated with keyboard controls. But after rotation, portions of each face lose interactivity (mouse events don't register on contained elements). Anyone know what might cause that issue?

It's difficult to explain, so here's a link to a test site:

http://joe-morgan.net/projects/matrix3d/

It only works in Safari and Chrome, of course.

Joe Morgan

Upvotes: 1

Views: 159

Answers (1)

Augie Gardner
Augie Gardner

Reputation: 2775

Joe, What's happening is, you have two elements on the exact same z-coordinate. Namely, the <li class="cube active"> and the <section> faces within it.

Here, we're not talking css's z-index, but css3's translated z-coordinate.

When the browser encounters two planes occupying quite literally the same exact space, things can get messy.

Since you don't want to have the li element shadowing your cube face's hover event, you should change your "active" classes CSS. On line 77 of main.js you set it with the code: 

vars.activeCube.css("-webkit-transform", action);

A quick fix would be to create an "action2" variable that stores the same matrix3d as you do in main.js, but translated -1px in the z coordinate. Set the css with vars.activeCube.css("-webkit-transform", action2); and everything should work as expected.

Let me know if this fixes your issue

Upvotes: 2

Related Questions