CodePen

HTML

            
              <div id="xyz">
  <div class="abc srirup">
    <div class="card">
      <div class="face front"> <a href="#"><img src="http://placehold.it/230x250" alt="" /></a> </div>
      <div class="face back"> <a href="#"><img src="http://placehold.it/230x250" alt="" /></a> </div>
    </div>
  </div>
</div>
            
          
!

↑ Insert the most common viewport meta tag

CSS

            
              #xyz {
  width: 1000px; position: relative; margin: 0px; 
}

.abc {
  width: 230px; height: 250px;
  -webkit-perspective: 1000;
}

.card {
  width: 230px; height: 250px;
  -webkit-transform-style: preserve-3d;
  -webkit-transition: 0.5s;
}
.abc:hover .card {
  -webkit-transform: rotateY(180deg);				
}

.face {
  position: absolute;
  -webkit-backface-visibility: hidden;
}


.srirup {
  float: left; position: absolute; top: 30px; left: 50px;
  -webkit-transform: rotate(0deg);
}
.srirup .front {
  
}
.srirup .back {
  width: 230px; height: 250px; padding: 0px;
  -webkit-transform: rotateY(180deg);
}
.srirup .back h2 {
  width: 250px; height: 250px; margin: 0 auto 20px auto;
  text-indent: -9999px; 
}
.srirup img {
  float: right;
}
.srirup p {
  float: left; width: 185px; margin: 0 0 20px 0;
  font-size: 17px; line-height: 28px; color: #4c4c4c; 
}
.srirup dl {
  font-size: 30px; font-weight: bold; 
  line-height: 40px; color: #717171;
  width: 264px; padding: 5px 10px; overflow: hidden; 
  -webkit-box-shadow: 0 1px 5px #888;
  text-shadow: 0 1px 1px #f5f5f5;
}
.srirup dl dt {
  float: left; clear: both;
}
.srirup dl dd {
  float: right;
}


            
          
!
? ?
? ?
Must be a valid URL.
+ add another resource
via CSS Lint

JS

            
              
            
          
!
Must be a valid URL.
+ add another resource
via JS Hint
Loading ..................