Deck of Cards

2-ouros.jpg

3-paus.jpg

cardgame.jpg

dama-espadas.jpg

Deck of Cards.markdown

Deck of Cards

A Pen by Jorge C. S. Cardoso on CodePen.

License.

index.html

<h1>Exercício</h1>
Aplicar transições CSS para animar a abertura das cartas.
<div class="deck">
	<div class="card"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/455884/3-paus.jpg" alt="" /></div>
	<div class="card"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/455884/valete-copas.jpg" alt="" /></div>
	<div class="card"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/455884/2-ouros.jpg" alt="" /></div>
	<div class="card"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/455884/dama-espadas.jpg" alt="" /></div>
	<div class="card"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/455884/rei-espadas.jpg" alt="" /></div>
</div>

rei-espadas.jpg

style.css

@charset "UTF-8";
/* CSS Document */

html, body {
	width: 100%;
	height: 100%;
	margin:0px;
	padding: 0px;
	overflow:hidden;
	position:relative;
	background-color:white;
}

.deck {
	position:relative;
	
	left:50%;
	width:250px;
	height: 300px;
	transform:translateX(-50%);
	border:none;
}

.card {
	position:absolute;
	top:0px;
	left:0px;
	width:inherit;
	height: inherit;
	
	transform-origin: left bottom;
	border: none;
	outline: none;
}

.card img {
	width:inherit;
	height:inherit;
	border: none;
	
}

.card:hover {
	outline: 3px solid red;
	
}

.deck:hover .card:nth-child(1) {
	transform:rotate(-20deg);

}

.deck:hover .card:nth-child(1):hover {
	transform:scale(1.2,1.2) rotate(-20deg);
}

.deck:hover .card:nth-child(2) {
	transform:rotate(-10deg);
}

.deck:hover .card:nth-child(2):hover {
	transform:scale(1.2,1.2) rotate(-10deg);
}

.deck:hover .card:nth-child(3) {
	transform:rotate(0deg);
}
.deck:hover .card:nth-child(3):hover {
	transform:scale(1.2,1.2) rotate(0deg);
}

.deck:hover .card:nth-child(4) {
	transform:rotate(10deg);
}
.deck:hover .card:nth-child(4):hover {
	transform:scale(1.2,1.2) rotate(10deg);
}

.deck:hover .card:nth-child(5) {
	transform:rotate(20deg);
}
.deck:hover .card:nth-child(5):hover {
	transform:scale(1.2,1.2) rotate(20deg);
}

valete-copas.jpg