CSS3 Picture 3D Flip Effect

Click on the image to see the flip effect

HTML structure

 <Divclass= "Flip">        <Divclass= "Front">            <imgsrc= "Images/img_01.jpg"alt="">        </Div>        <Divclass= "Back">            <imgsrc= "Images/img_03.jpg"alt="">        </Div>    </Div>

Style

  . container{perspective:1000;transform-style:preserve-3d;}        . container,.front,.back{width:380px;height:270px;}        . flip{position:relative;transition:2s;transform-style:preserve-3d;}        . Front,.back{position:absolute;top:0px;left:0px;backface-visibility:hidden; height:473px;}        . Front{z-index:2;}        . Back{transform:rotatey ( -180deg); height:473px;}        /*.container:hover. Flip{transform:rotatey (180deg);} *        /. Rotate{transform:rotatey (180deg);}

Js

  $ (function () {        var flag = true;        $ ('. Container '). Click (function () {         if (flag) {               $ ('. Flip '). addclass (' rotate ');               Flag = false;           }           else{               $ ('. Flip '). Removeclass (' rotate ');               Flag = true;});    

CSS3 Picture 3D Flip Effect