Edit in JSFiddle

span {
    text-align: center;
    -webkit-perspective: 800px;
    -moz-perspective: 800px;
    -ms-perspective: 800px;
    -o-perspective: 800px;
    perspective: 800px;
    font-size: 200px;
    -webkit-transition: 1s;
    -moz-transition: 1s;
    -ms-transition: 1s;
    -o-transition: 1s;
    transition: 1s;
    display:block;
}
section:hover span {
 -moz-transform: rotateY(180deg);
 -webkit-transform: rotateY(180deg);
 -ms-transform: rotateY(180deg);
 -o-transform: rotateY(180deg);
 transform: rotateY(180deg);
}

Hover me:
<section><span>3.14</span></section>