3d transform with pure CSS

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 wou开发者_运维技巧ld be great to get a push in the right direction!

Thanks.

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.

You can use 3D transformation features in CSS3. It will allow you to get your desired effect. You can create two <div>s. One for the front face and another for the back face. Make front face overlap the back face by using z-index and put them in the same position by using position: absolute. Also make their backface invisible by setting backface-visibilty: none. Then wrap them up in <div class="flipper"> and add the flip animations to this. Wrap the flipper inside <div class="container">

.container {
    perspective: 1000;
}

Perspective will allow the animation to be 3D(make sure to use vendor prefixes).

.flipper {
    transition: 0.6s;
    transform-style: preserve-3d;
    position: relative;
}

The flipper must have position relative because the two elements inside will be overlapping each other and will have been position absolute(make sure to add vendor prefixes to transition and transition-style).

.container:hover .flipper{
    transform: rotateY(180deg);
}

Then you can just add this piece of code to make the flipper flip upon hover over its wrapper. This video tutorial will help: http://www.youtube.com/watch?v=6ObIO-SjMZc

first off, you need a webgl browser that supports hardware acceleration (thats only safari5 under windowsxp, btw. and webkitnightly custombuild for linux - or win7)

• Put the side and the cover within a single div called wrapper that has a transition for the transform property (with like 1s easing or so)
• You have to "hide" the cover by rotating 90deg arround the Y axis
• add a wrapper:hover class that rotates itself -90deg arround the Y axis

if I have some more time later on, I'll try to give you the exact css, but these instructions should lead you to your desired result.