Easy "3D CSS card flip" test

Let's see a very very basic integration of the awesome "card flip" effect with simple CSS3 properties. Feel free to use/share/contribute.

by Susan Delgado

HTML

<div class="flip_container">
                    <div class="flip_card" class="shadow">
                      <div class="front face">
                        <img class="cir" src="http://lorempixel.com/400/200/"/>
                        <h3>Call for Abstracts</h3>
                        <p>
                        <span>Submissions Open</span><br>
                         March 25, 2013<br>
                        <span>Submission Deadline</span><br>
                        August 1, 2013
                        </p>
                      </div>
                      <div class="back face center">
                        <div class="cir even"  ><p>Lorem ipsum <br> dolor sutisn</p></div>
                        <h3>Call for <br>Abstracts</h3>
                      </div>
                    </div>
                </div>

CSS

body {
    background: #ccc;
}
.cir {
    width: 177px;
    height: 177px;
    border-radius:50%;
    overflow: hidden;
    margin-bottom: 35px;
}
.cir p {
    padding: 35% 30px;
}
.flip_container {
    -webkit-perspective: 1000px;
    -moz-perspective: 1000px;
    -o-perspective: 1000px;
    -ms-perspective: 1000px;
    perspective: 1000px;
    width: 177px;
    height: 435px;
    position: relative;
    margin: 10px auto;
}

.flip_container .flip_card {
    width: 100%;
    height: 100%;
    -webkit-transform-style: preserve-3d;
    -webkit-transition: all 1.0s linear;
    -moz-transform-style: preserve-3d;
    -moz-transition: all 1.0s linear;
    -o-transform-style: preserve-3d;
    -o-transition: all 1.0s linear;
    -ms-transform-style: preserve-3d;
    -ms-transition: all 1.0s linear;
    transform-style: preserve-3d;
    transition: all 1.0s linear;
}
.flip_container .flip_card .face {
    width: 100%;
    height: 100%;
    position: absolute;
    z-index:2;
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    -o-backface-visibility: hidden;
    -ms-backface-visibility: hidden;
    backface-visibility: hidden;
}
.flip_container .flip_card .front {
    position: absolute;
    z-index: 1;
}
.flip_container .flip_card .back {
    -webkit-transform: rotateY(180deg);
    -webkit-box-sizing: border-box;
    -moz-transform: rotateY(180deg);
    -moz-box-sizing: border-box;
    -o-transform: rotateY(180deg);
    -o-box-sizing: border-box;
    -ms-transform: rotateY(180deg);
    -ms-box-sizing: border-box;
    transform: rotateY(180deg);
    box-sizing: border-box;
}
.flip_container:hover .flip_card,.flip_container.hover_effect.flip_card {
  -webkit-transform: rotateY(180deg);
  -moz-transform: rotateY(180deg);
  -o-transform: rotateY(180deg);
  -ms-transform: rotateY(180deg);
  transform: rotateY(180deg);
 

}
.back .cir {
    border-radius:50%;
    width:177px;
    height: 174px;
}
.back .cir.odd {
    color: white;
   ...