A CodePen by skopp. Business Cards - Stacked business cards using CSS3 transition only

index.haml

.main.card
    .main-helper.card-helper
    .image.float-right
        %img{:src => "http://i.imgur.com/3zuYXMF.jpg"}
    .content.float-left
        %p
        time to call
        %p
        %br
        .title.bold
            SAMUEL L IPSUM
        .subtitle
            english, motherf*cker, do you speak it?
        .subtitle.bold
            %br
            shmuel.ipsum@mwallace.it
            %br
        .foooter.clear.center
            %h1 
            m. wallace internet technology services 

style.css

@import url(http://fonts.googleapis.com/css?family=Autour+One);

* {
  position: relative;
  color: #000;
  font-size: 14px;
  font-family: 'Autour One', sans-serif;
}

a,
a:link,
a:hover,
a:visited {
  color: #000;
  text-decoration: none;
}

a:hover {
  color: red;
}

#POSITION-RELATIVE,
#position-relative,
* {
  position: relative;
}

#FLOAT-LEFT,
.float-left {
  float: left;
}

#CLEAR,
.clear {
  clear: both;
}

#CENTER,
.center {
  text-align: center;
}

#BOLD,
.bold {
  font-weight: bold;
}

#CARD,
.card,
.card-helper,
.card:before,
.card:after {
  
  width: 640px;
  height: 320px;

  box-shadow: -4px 4px 24px rgba(0, 0, 0, 0.5);

  padding: 20px;
  border-radius: 8px;

  background: #fff;
}

.card {
  transform: rotate(-40deg) rotateX(20deg) rotateY(30deg);
  -webkit-transform: rotate(-40deg) rotateX(20deg) rotateY(30deg);
  margin: 80px auto;
}

.card-helper {
  position: absolute;
  top: 0;
  left: 0;
}

.card:before,
.card:after {
  content: "OMG, BSOD!";
  position: absolute;
  left: 0;
  
  background-image: url("http://i.imgur.com/c8SHVay.jpg");  
  background-repeat: no-repeat;
  background-position: 20px 20px;
  background-size: 330px;
}

.card:before {
  transform: rotate(8deg);
  -webkit-transform: rotate(8deg);
  top: -20px;
  z-index: -1;
}

.card:after {
  transform: rotate(16deg);
  -webkit-transform: rotate(16deg);
  top: -40px;
  z-index: -2;
}

.image {
  margin: 40px 30px ;
}

.image img {
  width: auto;
  height: auto;
  border-radius: 4px;
}

.title {
  font-size: 32px;
}
  
.card:hover {
  transform: none;
  -webkit-transform: none;
}


.card:hover:before,
.card:hover:after {
  top: 0;
}

.card:hover:before {
  transform: rotate(-32deg) rotateX(20deg) rotateY(30deg);
  -webkit-transform: rotate(-24deg) rotateX(20deg) rotateY(30deg);

}

.card:hover:after {
  transform: rotate(-32deg) rotateX(20deg) rotateY(30deg);
  -webkit-transform: rotate(-32deg) rotateX(20deg) rotateY(30deg);
}

.card,
.card:before,
.card:after,
.card:hover,
.card:hover:before,
.card:hover:after {
  transition: all 0.8s ease-in-out;
  -webkit-transition: all 0.8s ease-in-out;
}

.card,
.card:before,
.card:after {
  transition-delay: 0.8s;
  -webkit-transition-delay: 0.8s;
}