Adding Incredible Effects to Magento Theme: Creating a stunning CSS3 3D flip animation

Now we are going to add a stunning effect to the hover status of the book.

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

2. 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 shown in the following code:

<div class=”item-container”>

<div class=”item-flipper”>

<div class=”item-front”><img src=”…”></div>

<div class=”item-back”>Back informations…</div>

</div>

</div>

The item-container attribute will contain item-flipper, which is the 3D container that will contain the 3D rotating animation of the front and back covers of our book.

In order to apply this structure to our file, we need to edit the structure of the item in the list-home.phtml file located in app/design/frontend/bookstore/default/ template/products/.

Open the list-home.phtml file and find the following code that generates the image within the item block:

<a href=”<?php echo $_product->getProductUrl() ?>” title=”<?php

echo $this->stripTags($this->getImageLabel($_product,

‘small_image’), null, true) ?>” class=”product-image”>

<img src=”<?php echo $this->helper(‘catalog/image’)-

>init($_product, ‘small_image’)->resize(250,310);

?>” alt= “<?php echo $this->stripTags($this->getImageLabel($_product, ‘small_image’), null, true)

?>” class= “img-responsive img-thumbnail” />

</a>

Then, replace the preceding code with the following code:

<div class=”item-container img-thumbnail”>

<div class=”item-flipper”>

<div class=”item-front”>

<!– front content –>

<a href=”<?php echo $_product->getProductUrl() ?>”

title=”<?php echo $this->stripTags($this-

>getImageLabel($_product, ‘small_image’), null, true)

?>” class=”product-image”><img src=”<?php echo $this-

>helper(‘catalog/image’)->init($_product, ‘small_image’)-

>resize(250,310); ?>” alt=”<?php echo $this-

>stripTags($this->getImageLabel($_product, ‘small_image’),

null, true) ?>” class=”img-responsive” /></a>

</div>

<div class=”item-back”>

<!– back content –>

<div class=”book-info”>

<div class=”h4″><a href=”<?php echo $_product-

>getProductUrl() ?>” title=”<?php echo $this-

>stripTags($_product->getName(), null, true) ?>”><?php

echo $_helper->productAttribute($_product, $_product-

>getName(), ‘name’) ?></a></div>

<div class=”short-description”><?php echo $_helper-

>productAttribute($_product, $_product-

>getShortDescription(), ‘short_description’) ?></div>

</div>

<p><a href=”<?php echo $_product->getProductUrl() ?>”

title=”<?php echo $this->stripTags($_product->getName(),

null, true) ?>” class=”btn btn-block btn-success”><?php

echo $this-> (‘Book Details’)?></a></p>

</div>

</div>

</div>

This is the structure that includes an image on the front cover and the information on the back cover of the book.

3. Creating the CSS animation

Now we are going to see, step by step, the main CSS information that will make the book flip from the front cover to the back cover. We start by customizing the item-container attribute, which is the main container, with the following CSS code:

.item-container {

-webkit-perspective:300px;

-moz-perspective:300px;

perspective:300px;

margin:0 auto;

height:250px;

margin-bottom:10px;

width:100%;

}

We assign the perspective property that represents the perspective inclination from which an element is viewed, and that will affect the elements inside it.

Now, we assign the 3D rotation of 180 degree to the item-flipper element on the item-container hover status by using the CSS3 property transition rotateY in the following manner:

.products-grid li .item-container:hover .item-flipper {

-moz-transform:rotateY(180deg);

-webkit-transform:rotateY(180deg);

transform:rotateY(180deg);

}

Now we assign dimensions to our elements item-front and item-back, and customize the elements on the back cover, such as the title and the description.

We also need to set up the speed of the transition from the front cover to the back cover and declare whether we want to hide or show the faces while they are rotating, which we do with the “backface-visibility: hidden” property. Consider the following code:

/* Hide the back on hover */

.products-grid li .item-front, .products-grid li .item-back {

height:240px;

width:100%;

-webkit-backface-visibility:hidden;

-moz-backface-visibility:hidden;

backface-visibility:hidden;

position:absolute;

top:0;

left:0; background:none;

}

/* Fix z-index for front block to place above the back */

.products-grid li .item-front {

z-index:2;

}

/* back, initially hidden pane */

.products-grid li .item-back {

-webkit-transform:rotateY(180deg);

-moz-transform:rotateY(180deg);

transform:rotateY(180deg);

background:none repeat scroll 0 0 #000;

color:#FFF;

padding:15px;

}

.products-grid li .item-back .book-info {

height:180px;

}

.products-grid li .item-back .book-info .h4 a {

color:#FA9221;

font-weight:700;

margin-bottom:10px;

display:block;

}

.products-grid li .item-back .book-info .short-description {

font-size:12px;

color:#ccc;

}

The code also includes the simple customization of the elements within the item.

Note: The .products-grid li .item-back element is initially hidden by a 180 degree rotation.

Now, in order to complete the animations, we specify that our flipper is the block where the 3D animation runs using the property “preserve-3d“. The following code will explain this better:

.products-grid li .item-flipper {

-webkit-transition:.6s;

-moz-transition:.6s;

-ms-transition:.6s;

transition:.6s;

-moz-transform-style:preserve-3d;

-webkit-transform-style:preserve-3d;

transform-style:preserve-3d;

position:relative;

}

And we are done! You can find the full CSS in the code bundle included with this book.

If you like 3D transformations and want to investigate them, you can read more about them at http://24ways.org/2010/intro-to-css-3d-transforms/, where you can read a useful article that explains the CSS 3D transformations better.

Source: Sacca Andrea (2014), Mastering Magento theme design, Packt Publishing; Illustrated edition.

Leave a Reply

Your email address will not be published. Required fields are marked *