CSS Image Hover Effect 3D Flip

by Ali Khaled

HTML

<section class="container">
  <div id="card">
    <figure class="front"><img src="http://lorempixel.com/250/280/people/4" alt="Illustration of Viking"/></figure>
      <figure class="back"><h3>Test</h3></figure>
  </div>
</section>

CSS

@import url(http://fonts.googleapis.com/css?family=Denk+One:400);
body {
	font-family: 'Denk One', Calibri, Arial, sans-serif;
	color: #89867e;
}

*, *:after, *:before { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }

    .container {
      width: 250px;
      height: 280px;
    position: relative;
      -webkit-perspective: 800px;
         -moz-perspective: 800px;
           -o-perspective: 800px;
              perspective: 800px;
    }

    #card {
      width: 100%;
      height: 100%;
      -webkit-transition: -webkit-transform 1s;
         -moz-transition: -moz-transform 1s;
           -o-transition: -o-transform 1s;
              transition: transform 1s;
      -webkit-transform-style: preserve-3d;
         -moz-transform-style: preserve-3d;
           -o-transform-style: preserve-3d;
              transform-style: preserve-3d;
    }

    .container:hover #card {
      -webkit-transform: rotateY( 180deg );
         -moz-transform: rotateY( 180deg );
           -o-transform: rotateY( 180deg );
              transform: rotateY( 180deg );
    }

    #card figure {
	background: #ddd;
    margin: 0;
      width: 250px;
      height: 280px;
      display: block;
      line-height: 20px;
      text-align: center;
      font-weight: bold;
      font-size: 40px;
      position: absolute;
      -webkit-backface-visibility: hidden;
         -moz-backface-visibility: hidden;
           -o-backface-visibility: hidden;
              backface-visibility: hidden;
    }

    #card .back {
      -webkit-transform: rotateY( 180deg );
         -moz-transform: rotateY( 180deg );
           -o-transform: rotateY( 180deg );
              transform: rotateY( 180deg );
    }