card_spread

by Kim Ara

HTML

<div id="container" class="spread">
  <div class="card card1">A &spades;</div>
  <div class="card card2">B &spades;</div>
  <div class="card card3">C &spades;</div>
  <div class="card card4">D &spades;</div>
  <div class="card card5">E &spades;</div>
  <div class="card card6">F &spades;</div>
</div>

CSS

.card {
  display: block;
  width: 100px;
  height: 150px;
  background-color: white;
  border: 3px solid black;
  border-radius: 20px;
  position: absolute;
  top: 50%;
  left: 30%;
  padding: 10px;
  font-size: 200%;
  font-weight: bold;
  -webkit-transition: all 0.5s ease;
  -moz-transition: all 0.5s ease;
  -ms-transition: all 0.5s ease;
  -o-transition: all 0.5s ease;
  transition: all 0.5s ease;
  -moz-transform: rotate(-50deg) translateY(-200px);
  -webkit-transform: rotate(-50deg) translateY(-200px);
  -o-transform: rotate(-50deg) translateY(-200px);
  -ms-transform: rotate(-50deg) translateY(-200px);
  transform: rotate(-50deg) translateY(-200px);
}

.spread .card2 {
  -webkit-transition: all 2s ease;
  -moz-transition: all 2s ease;
  -ms-transition: all 2s ease;
  -o-transition: all 2s ease;
  transition: all 2s ease;
  -moz-transform: rotate(-30deg) translateY(-200px);
  -webkit-transform: rotate(-30deg) translateY(-200px);
  -o-transform: rotate(-30deg) translateY(-200px);
  -ms-transform: rotate(-30deg) translateY(-200px);
  transform: rotate(-30deg) translateY(-200px);
}

.spread .card3 {
  -webkit-transition: all 2s ease;
  -moz-transition: all 2s ease;
  -ms-transition: all 2s ease;
  -o-transition: all 2s ease;
  transition: all 2s ease;
  -moz-transform: rotate(-10deg) translateY(-200px);
  -webkit-transform: rotate(-10deg) translateY(-200px);
  -o-transform: rotate(-10deg) translateY(-200px);
  -ms-transform: rotate(-10deg) translateY(-200px);
  transform: rotate(-10deg) translateY(-200px);
} 

.spread .card4 {
  -webkit-transition: all 2s ease;
  -moz-transition: all 2s ease;
  -ms-transition: all 2s ease;
  -o-transition: all 2s ease;
  transition: all 2s ease;
  -moz-transform: rotate(10deg) translateY(-200px);
  -webkit-transform: rotate(10deg) translateY(-200px);
  -o-transform: rotate(10deg) translateY(-200px);
  -ms-transform: rotate(10deg) translateY(-200px);
  transform: rotate(10deg) translateY(-200px);
}

.spread .card5 {
 ...

JavaScript

$('#container').click(function() {
  $(this).toggleClass('spread');
});