3d transform with pure CSS

Question

I am trying to rebuild this with pure css. And I've got this far. But the idea as you can see from the flash version, is that as the cover appears the other divs make space for the one that is on hover.

I have tried to set the width on auto and have set the transitioning property on that particular div, but with no luck. I also tried to set the div's width to 0 before hover, and set it to 300px on hover, this did the trick but it did not really animate..

It could be something simple, or maybe not, but either way would be great to get a push in the right direction!

Thanks.

Answer 1

You don't need a WebGL browser you can do this with plain 3D transforms.

You have to explicitly change the width of the divs when you hover because transforms explicitly don't trigger relayout. You'll need to position the contents of the book absolutely.

You should use a wrapper div for the hover width change and a child div for the transform.

Nesting is key to transform sanity.

Here is the jsfiddle that shows it in action: http://jsfiddle.net/ZMqze/4/

needs a little more polish for unhover.