Make Flip 3D Lens Effects On Images

<center>
<style>
#iphone{
width:550px;
height:293px;
background:url('http:https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi1jeoEO6LPsjjjrCf_NxRyN_LvMTOtGWEI6bi0KG_OQ_H_-TkbGasKurl64-OsOD5HvyyYk4oX1snb5QGcaWJxFCSfPf1vTqsFV-bHzfOM9i6q56LFHexMomqRaTg88_hlD2cP1v8V2Mw/s1600/BishnuBahadurRaut.jpg') no-repeat center center;
position:relative;
}
#webpage{
width:365px;
height:207px;
position:absolute;
top:63%;
left:62%;
margin:-141px 0 0 -249px;
}
#retina{
background:url('http:https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi1jeoEO6LPsjjjrCf_NxRyN_LvMTOtGWEI6bi0KG_OQ_H_-TkbGasKurl64-OsOD5HvyyYk4oX1snb5QGcaWJxFCSfPf1vTqsFV-bHzfOM9i6q56LFHexMomqRaTg88_hlD2cP1v8V2Mw/s1600/BishnuBahadurRaut.jpg') no-repeat center center white;
border:2px solid white;
position:absolute;
height:180px;
width:180px;
display:none;
-moz-box-shadow:0 0 5px #777, 0 0 10px #aaa inset;
-webkit-box-shadow:0 0 5px #777;
box-shadow:0 0 5px #777, 0 0 10px #aaa inset;
-moz-border-radius:90px;
-webkit-border-radius:90px;
border-radius:90px;
}
</style>

<div id="iphone">
<div id="webpage">
<img alt="Web Page" src="
" height="207" width="365" />
<div id="retina">
</div>
</div>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
<script src="http://faceblog-evolutions.googlecode.com/files/script.js" type="text/javascript"></script></center>

Description -

Blue text is Figure 1 (Fig Lens Flip)
Red text is Figure 2 (Main Picture)
Please Change the URL of your image with the same image URL
Good luck Lens Flip 3D Effect In Figure, may be useful

Thank you
Share on Google Plus

About Unknown

This is a short description in the author block about the author. You edit it by entering text in the "Biographical Info" field in the user admin panel.
    Blogger Comment
    Facebook Comment

0 comments:

Post a Comment