Here's how to give the effect of flipping images on your blog.

Bantu KLIK iklan ini gan!!!! On a clear day I will share the trick how to give effect flipping on the picture in your blog. surely in manufacturing we will use css.
you need to know css effects it also supports various browsers such as mozilla firefox, google chrome, safari and other browsers except opera.
for the creation is indeed quite easy even seoarng any newbie I am sure can surely make it in curious how to make it, let's check out the tutorial carefully.

the stage of making the effect of flipping on the image.

1. Please masu in advance on account of your blog.
2.on the dashbord click > > template and then click on edit HTML > > code like this (using CTRL + F)]] > or code.
3. Please copy the code below and then may be located right above the code we're looking for.

.container-card { position:relative; height:300px; width:300px; margin:20px auto; }
    .container-card > div { position:absolute; left:0; top:0; width:300px; height:300px; padding:20px; background:#3C404B; -webkit-transition:1.5s ease-in-out; -moz-transition:1.5s ease-in-out; transition:1.5s ease-in-out; }
    .container-card > div.back { background:#000; -moz-backface-visibility:hidden; -webkit-backface-visibility:hidden; backface-visibility:hidden; -moz-transform:perspective(800px) rotateY(180deg); -webkit-transform:perspective(800px) rotateY(180deg); transform:perspective(800px) rotateY(180deg); }
    .container-card > div.front { -moz-backface-visibility:hidden; -webkit-backface-visibility:hidden; backface-visibility:hidden; -moz-transform:perspective(800px) rotateY(0deg); -webkit-transform:perspective(800px) rotateY(0deg); transform:perspective(800px) rotateY(0deg); -webkit-box-shadow:5px 5px 5px #aaa; -moz-box-shadow:5px 5px 5px #aaa; box-shadow:5px 5px 5px #aaa; }
    .container-card:hover > div.back { -moz-transform:perspective(800px) rotateY(0); -webkit-transform:perspective(800px) rotateY(0); transform:perspective(800px) rotateY(0); -webkit-box-shadow:5px 5px 5px #aaa; -moz-box-shadow:5px 5px 5px #aaa; box-shadow:5px 5px 5px #aaa; }
    .container-card:hover > div.front { -webkit-transform:perspective(800px) rotateY(-179.9deg); -moz-transform:perspective(800px) rotateY(-179.9deg); transform:perspective(800px) rotateY(-179.9deg); }

4. to call him in the posting, use the code below and change the rl picture terssebut with the image you want.

example Effect Pliffing

Here's how to give the effect of flipping images on your blog.

The tutorial is complete and now you can give it a try, to see effectnya point your cursor on the image that you already give effect. I congratulate tried and succeeded, see you in the next article bye bye ... Bantu KLIK iklan ini gan!!!!