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; }