¿Como Crear un efecto de rotacion 3d css3?

Aprendiendo a realizar rotación 3D con CSS3 y siguiendo con esta experimentación de mejorar los contenidos de las paginas utilizando HTML5 y CSS3, me he topado con que lo que los viejos programadores teníamos que hacer de ocultar, crear gif animado, usar Flash o esas arcaicas acciones han sido ahora superadas por Transformaciones 3D en CSS, esto es una maravilla y he creado un ejemplo simple usando una de las cartas de Magic que mas me han gustado.

[codepen_embed height=»300″ theme_id=»22281″ slug_hash=»ddzOWe» default_tab=»css,result» user=»fmorenor»]See the Pen Rotacion de una carta by Francisco Moreno (@fmorenor) on CodePen.[/codepen_embed]

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Prueba de uso CSS para tarjetas de Magic</title>
<link rel="stylesheet" href="normalize.css" />
<link href="css/cards.css" rel="stylesheet" media="screen"/>
</head>
<body>

<h1>Prueba de Rotacion de Tarjeta</h1>
<div id="cartas">
    <div class="Magic">
        <div class="card">
            <div class="face frente">
                <img src="images/kokush10.jpg" alt="Magic" />
            </div>
            <div class="face espalda">
                <img src="images/Magic_back.jpg" alt="Magic Back" /

            </div>
        </div>
    </div>

</div>

</body>
</html>

Este es la hoja de estilo con las claves del la rotación.

#cartas{
    width: 750px; position: relative; margin: 50px auto;
}

.magic {
    width: 400px; height: 412px;
    -webkit-perspective: 1000;
}

.card {
    width: 265px; height: px;
    -webkit-transform-style: preserve-3d;
    -webkit-transition: 0.5s;
}
    .card:hover {
        -webkit-transform: rotateY(180deg);
    }

.face {
    position: absolute;
    -webkit-backface-visibility: hidden;
}

.card {
    float: left; position: absolute; top: 30px; left: 20px;

}
    .frente  {
        width: 265px; height: 370px;
        -webkit-transform: rotate(5deg);
    }
    .espalda {
        width: 265px; height: 370px;
        -webkit-transform: rotateY(180deg);
    }
    .espalda img{
        width: 265px; height: 370px;
        -webkit-transform: rotate(5deg);

    }

Como veran es una manera sencilla de simular una rotación de 180 grados para una tarjeta, solo hay poner el Mouse encima y la cartita Gira y asi creamos rotacion 3d css3.