5

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.

Michael Mullany
  • 30,283
  • 6
  • 81
  • 105
dandoen
  • 1,647
  • 5
  • 26
  • 44

3 Answers3

3

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.

Michael Mullany
  • 30,283
  • 6
  • 81
  • 105
  • Yeah, I think you'll need some JS to change the width at the same time unfortunately. – Rich Bradshaw Jul 06 '11 at 17:54
  • You don't need javascript to do this – Michael Mullany Jul 06 '11 at 18:51
  • You'll probably want to use JS to deal with the z-index issues. – Rich Bradshaw Jul 06 '11 at 18:55
  • Don't think you need JS to deal with the z-index issue once it's animated. I think they won't overlap because it takes a few milliseconds for the width to animate back. The only question now remains is why it does not animate the width. – dandoen Jul 07 '11 at 14:27
  • Found out that you need to give the transition property to the hover state of the expanded div as well. As for the z-index issue, I was partly right. With the transition of the expansion of the div's width set at 0.2sec, you won't see stuff overlapping. Here is the updated version: http://jsfiddle.net/dandoen/ZMqze/6/ – dandoen Jul 07 '11 at 14:43
  • Am quite happy with the result: http://jsfiddle.net/dandoen/ZMqze/8/embedded/result/ Only problem now is that things get ugly when you hover over a few rapidly. I tried delaying the animation, but it didn't really work. Tips are appreciated :) – dandoen Jul 07 '11 at 14:52
0

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

Asif Mallik
  • 59
  • 6
-1

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.

japrescott
  • 4,736
  • 3
  • 25
  • 37
  • 1
    thanks for your reply, I didn't get why it exactly needs a webgl browser. for the "simple" 3d transforming? – dandoen Jul 06 '11 at 11:22
  • on different systems, I can use the matrix3d css transition option/attribute, but there is no 3d happening. Only Browser that does the 3d is safari on winxp or a nightly build of the webkit with qt (which also does 3d on linux).. maybe I have a parameter missing in the config to enable this.. – japrescott Jul 10 '11 at 12:10