Title Test

CSS 3D Rotation on Mouseover

    .flip-container {

        margin: 50px;

        perspective: 1000;

        display: inline-block;


    .flip-container:hover .card {

        transform: rotateY(180deg);


    .card, .front, .back {

        width: 130px;

        height: 195px;


    .card {

        transition: 0.5s;

        transform-style: preserve-3d;

        position: relative;


    .front, .back {

        backface-visibility: hidden;

        position: absolute;


    .front {

        z-index: 1;

        transform: rotateY(180deg);

        background: url("images/card-front.jpg") no-repeat;


    .back {

        z-index: 2; /* back side, placed above front */

        transform: rotateY(0deg);

        background: url("images/card-back.jpg") no-repeat;


</div> </div>

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s