Rotate or flip a picture

Using CSS and jQuery Flip Image

<div class="f1_container">
    <div class="shadow f1_card">
        <div class="front face">
            <img src="http://placehold.it/450x281&text=Click%20Here" style="height: 281px; width: 450px;" />
        </div>
        <div class="back face center">Image Flip Using Css and Jquery</div>
    </div>
</div>

.f1_container{position:relative;width:450px;height:281px;z-index:1;float:left;-webkit-perspective:1000;perspective:1000;margin:10px}
.f1_card{width:100%;height:100%;-webkit-transform-style:preserve-3d;-webkit-transition:all 1s linear;transform-style:preserve-3d;transition:all 1s linear}
.f1_container.active .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:#FFF;text-align:center;background-color:#29D;font-size:1.8rem}
body{width:2000px}

$('.f1_container').click(function () {
    $(this).toggleClass('active');
});

DEMO