How To Add 3D Flip Effect To an image in Blogger using CSS3

CSS3 3D Flip Effect To an image in Blogger: Every one is adding images to Blogger , yeah it's damn true but why not you add it uniquely ? That is 3D Flip effect using CSS3 . CSS3 has just brought the revolution to the web world , playing with the codes you can rotate your images , objects , buttons etc in any degree . Moreover you can apply your own custom colors to enhance the effect of design of your blog , websites etc.Let's play with this awesome feature of CSS3 to add 3D Flip Effect To an image in Blogger.In this tutorial you will have to deal with 2 codes , one is simple some divs tags and other one is CSS for styling image.

DEMO

DEMO LINK

How To Add 3D Flip Effect To an image in Blogger using CSS3 

• Actually i have made it very simple for you guys , you just have to add your image link in the script .
• First of all Go To Post Section , Click on Create Post and then switch into HTML Section copy the below script and paste it over there.

<div class="profile-image">
 <div class="flip-3d">
 <figure>
 <img src="yourimage.jpg" />
 <figcaption>Caption text goes over here!</figcaption>
 </figure>
 </div>
</div>

• Replace yourimage.jpg with your desired image url. 
• and in the figcaption tags add the text you want to appear on hovering the image.
• Now Just Copy the below CSS code and paste it just below the above script

<style>
.profile-image {
  margin-bottom:20px;
}
div.flip-3d {
 perspective: 1200px; width: 100%; float: left;
}
div.flip-3d-skills {
 perspective: 1200px; width: 100%; float: left;
}
div.flip-3d figure {
 position: relative;
 transform-style: preserve-3d;
 transition: 1s transform;
 font-size: 1.6rem;
}
div.flip-3d figure img {
 width: 100%;
}
div.flip-3d figure figcaption {
 position: absolute;
width: 105%; height: 50%; top: 0;
 transform: rotateY(.5turn) translateZ(1px);
 background: rgba(255,255,255,0.9);
 text-align: center;
 padding-top: 45%;
 opacity: 0.6;
 transition: 1s .5s opacity;
}
div.flip-3d:hover figure { transform: rotateY(.5turn); }
div.flip-3d:hover figure figcaption { opacity: 1; }
div.flip-3d figure:after {
content: " "; display: block;
height: 8vw; width: 100%;
transform: rotateX(90deg);
background-image: radial-gradient(ellipse closest-side, rgba(0, 0, 0, 0.05) 0%, rgba(0, 0, 0, 0) 100%);
}
</style>

• You can also play with  the different properties and selectors of CSS by changing the above Code , but if you are new to CSS just add the image url and caption text , don't edit it if you are new to programming!

---

So What's Up : Any Problem in implementing the Code? Did you like this tutorial , please share your beautiful thoughts with us , stay blessed Happy Blogging!

SHARE

Iftikhar Uddin

I am a Web Developer,Graphic Designer,Blogger Wizard,WordPress Samurai,Code Engineer,SEO Guru,Software Engineer and food hunter.

• 
• 
• 
• 
•