html - Logic to Flip Image in jquery -


anyone please explain logic should use flip image in image slider. making image slider, on click on image, should flip , behind want display description of image.

i have tried examples. working single image,but when trying in example not working. know how sliding works, explain logic flip image.

just give me logic try write code.

thanks in advance,

html

<head>     <meta charset="utf-8">     <title>html</title>     <link rel="stylesheet" href="main.css" type="text/css" />     <script src="jquery.js" type="text/javascript"></script>     <script src="main.js" type="text/javascript"></script> </head> <body>     <div id="f1_container">         <div id="f1_card" class="shadow">             <div class="front face">                 <img src="http://media-cdn.tripadvisor.com/media/photo-s/03/48/0b/14/dolphin-view-chalets.jpg" style="height: 281px; width: 450px;" />             </div>             <div class="back face center">                 text inside here             </div>         </div>     </div> 

css

#f1_container { position: relative; margin: 10px auto; width: 450px; height: 281px;     z-index : 1; } #f1_container {     -webkit-perspective: 1000;     perspective: 1000; } #f1_card {     width: 100%;     height: 100%;     -webkit-transform-style: preserve-3d;     -webkit-transition: 1.0s linear;     transform-style: preserve-3d;     transition: 1.0s linear; } #f1_container:hover #f1_card {     -webkit-transform: rotatey(180deg);     transform: rotatey(180deg);     box-shadow: -5px 5px 5px #aaa; } .face {     position: absolute;     width: 100%;     height: 100%;     backface-visibility: hidden;     -webkit-backface-visibility: hidden; } .face.back {     display: block;     -webkit-transform: rotatey(180deg);     transform: rotatey(180deg);     box-sizing: border-box;     color: white;     text-align: center;     background-color: #aaa; } 


Popular posts from this blog

How to calculate SNR of signals in MATLAB? -

c# - Attempting to upload to FTP: System.Net.WebException: System error -

ios - UISlider customization: how to properly add shadow to custom knob image -