O'Reilly logo

Mastering Magento Theme Design by Andrea Saccà

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

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 ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required