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.
