css3 flip 翻转

        .container{
            margin:30px auto;
            /* How pronounced should the 3D effects be */
            perspective: 500;
            -webkit-perspective: 500;
            -moz-perspective: 500;
            -ms-perspective: 500;
            -o-perspective: 500;
            width:150px;
            height:150px;
            position:relative;
            /*Some UI */
            border-radius:6px;
            -webkit-border-radius:6px;
            -moz-border-radius:6px;
            -ms-border-radius:6px;
            -o-border-radius:6px;
            font-size:28px;
            line-height:150px;
            vertical-align:middle;
            cursor:pointer;
        }

        .box-front,.box-back{
            /* Enable 3D transforms */
            transform-style: preserve-3d;
            -webkit-transform-style: preserve-3d;
            -moz-transform-style: preserve-3d;
            -ms-transform-style: preserve-3d;
            -o-transform-style: preserve-3d;
            transform-style: preserve-3d;
            backface-visibility: hidden;
            -webkit-backface-visibility: hidden;
            -moz-backface-visibility: hidden;
            -ms-backface-visibility: hidden;
            -o-backface-visibility: hidden;
            width:100%;
            height:100%;
            position:absolute;
            background-color:#0090d9;
            /* Animate the transitions */
            -webkit-transition:0.8s; text-align:center;
            -moz-transition:0.8s; text-align:center;
            -ms-transition:0.8s; text-align:center;
            -o-transition:0.8s; text-align:center;
            transition:0.8s; text-align:center;
            color:#FFF;
            border-radius:6px;
            -webkit-border-radius:6px;
            -moz-border-radius:6px;
            -ms-border-radius:6px;
            -o-border-radius:6px;
        }

        .box-back{
            /* The back side is flipped 180 deg by default */
            transform:rotateY(180deg);
            -webkit-transform:rotateY(180deg);
            -moz-transform:rotateY(180deg);
            -ms-transform:rotateY(180deg);
            -o-transform:rotateY(180deg);
            background-color:#f35958;

        }

        .container:hover .box-front{
            /* When the container is hovered, flip the front side and hide it .. */
            transform:rotateY(180deg);
            -webkit-transform:rotateY(180deg);
            -moz-transform:rotateY(180deg);
            -ms-transform:rotateY(180deg);
            -o-transform:rotateY(180deg);
        }

        .container:hover .box-back{
            /* .. at the same time flip the back side into visibility */
            transform:rotateY(360deg);
            -webkit-transform:rotateY(360deg);
            -moz-transform:rotateY(360deg);
            -ms-transform:rotateY(360deg);
            -o-transform:rotateY(360deg);
        }

<div class="container">
        <div class="box-front">Front :)</div>
        <div class="box-back">Back :D </div>
    </div>