¿Como Crear un efecto de rotacion 3d css3?

Francisco Moreno Rodríguez
16 jun 2014
2 min de lectura

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.

¿Como Crear un efecto de rotacion 3d css3?

Entradas recientes

Comentarios