CODEWITHSUNDEEP
htmlcsstransform
HDW
HDW

Reputation: 307

Amazon book flipping CSS animation: how is it coded?

Link to example. Hover over the book on the left side

As you can see, the book seems to open towards the user. I already have the first part of the animation: JSFiddle

HTML: 

<h1>Boek opendoen animatie</h1>

<div class="achtergrond">
        <img class="foto" src="http://i.imgur.com/u19t6iW.jpg" alt="Cover">
</div>

</body>
</html>

CSS:

div.achtergrond {
    background-color: black;
    width: 250px;
    height: 376px;

}
img.foto {
    width: 250px;
    height: auto;

    -webkit-transition: -webkit-transform 1s; /* For Safari 3.1 to 6.0 */
/*    -webkit-transform-origin: 0 0;*/
}

img.foto:hover {
/*    -webkit-transform: scaleX(1.5)*/
    -webkit-transform: matrix3d(0.8660254, 0, 0.5, 0, 0, 1, 0, 0, -0.5, 0, 0.8660254, 0, 0, 0, 0, 1);
}

Now this doesn't seem to enlarge the right corners of the book, so it doesn't seem like the cover is coming towards the user.

I've tried -webkit-perspective, transform-style,... but can't seem to get the desired effect.

Upvotes: 0

Views: 728

Answers (2)

HDW
HDW

Reputation: 307

I found how I need to fix this. I tried the perspective and perspective-origin options before but didn't put them in the correct place. These options have to be put in the parent element (here the "achtergrond"-div).

See w3schools with the quote

When defining the perspective-origin property for an element, it is the CHILD elements that are positioned, NOT the element itself.

The new CSS is thus:

div.achtergrond {
    background-color: black;
    width: 250px;
    height: 376px;
    -webkit-perspective: 250px; /* Chrome, Safari, Opera */
    -webkit-perspective-origin: 100% 30%; /* Chrome, Safari, Opera */

}
img.foto {
    width: 250px;
    height: auto;
    -webkit-transform-origin: 0 0;
    -webkit-transform-style: preserve-3d;
    -webkit-transition: -webkit-transform 1s; /* For Safari 3.1 to 6.0 */

}

img.foto:hover {
/*    -webkit-transform: scaleX(1.5)*/
    transform: rotateY(-20deg); 
-moz-transform: rotateY(-20deg);
-webkit-transform: rotateY(-20deg);
}

Upvotes: 1

Sanjay Gohil
Sanjay Gohil

Reputation: 144

try this css on image hover 

transform: rotateY(-20deg); 
-moz-transform: rotateY(-20deg);
-webkit-transform: rotateY(-20deg);

Upvotes: 2

Related Questions