Search icon CANCEL
Subscription
0
Cart icon
Your Cart (0 item)
Close icon
You have no products in your basket yet
Save more on your purchases! discount-offer-chevron-icon
Savings automatically calculated. No voucher code required.
Arrow left icon
Explore Products
Best Sellers
New Releases
Books
Videos
Audiobooks
Learning Hub
Newsletter Hub
Free Learning
Arrow right icon
Arrow up icon
GO TO TOP
Mastering Magento Theme Design

You're reading from   Mastering Magento Theme Design Magento is the super-capable open source e-commerce platform that's number one for a reason. By using this book to optimize your know-how, you'll be acquiring the ultimate in e-tail expertise for yourself and your clients.

Arrow left icon
Product type Paperback
Published in Apr 2014
Publisher
ISBN-13 9781783288236
Length 310 pages
Edition Edition
Languages
Tools
Concepts
Arrow right icon
Author (1):
Arrow left icon
Andrea Sacca Andrea Sacca
Author Profile Icon Andrea Sacca
Andrea Sacca
Arrow right icon
View More author details
Toc

Table of Contents (18) Chapters Close

Mastering Magento Theme Design
Credits
About the Author
About the Reviewers
www.PacktPub.com
Preface
1. Introducing Magento Theme Design 2. Creating a Responsive Magento Theme with Bootstrap 3 FREE CHAPTER 3. Customizing Our Custom Theme 4. Adding Incredible Effects to Our Theme 5. Making the Theme Fully Responsive 6. Making the Theme Socially Ready 7. Creating a Magento Widget 8. Creating a Theme Admin Panel 9. Customizing the Backend of Magento 10. Packaging and Selling the Theme Conclusions and Credits Index

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

lock icon The rest of the chapter is locked
Register for a free Packt account to unlock a world of extra content!
A free Packt account unlocks extra newsletters, articles, discounted offers, and much more. Start advancing your knowledge today.
Unlock this book and the full library FREE for 7 days
Get unlimited access to 7000+ expert-authored eBooks and videos courses covering every tech area you can think of
Renews at $19.99/month. Cancel anytime
Banner background image