Creating a stunning CSS3 3D flip animation
Now we are going to add a stunning effect to the hover status of the book.
Planning the hover animation
We plan to insert the following three pieces of information on hovering the box:
The product title
A short description of the product
The Book Details button
The effect that we are going to create with CSS3 is the rotation of the book using the CSS3 property called perspective. In this way, when the users hover the cursor over the book, the front side will rotate with a 3D animation and display back of the book.
In the following screenshot, you can see the off status on the left and the hover status on the right:
The HTML code of list-home.phtml
As we said in the previous section, we apply the rotating effect to the products list on the home page of our theme, but after going through this section, you can replicate the structure of the list-home.phtml file that we are going to edit to the list.phtml file. The basic structure that we are going to use is...
