.pila {
  margin: 100px auto;
}
 
.pila, .pila img {
  height: 335px;
  -webkit-transition: .6s all ease-out;
  -moz-transition: .6s all ease-out;
  -o-transition: .6s all ease-out;
  -ms-transition: .6s all ease-out;
  transition: .6s all ease-out;
  width: 500px;
}
 
.pila img {
  border: 15px solid #ffe;
  -webkit-box-shadow: 12px 12px 10px rgba(0, 0, 0, 0.2);
  box-shadow: 12px 12px 10px rgba(0, 0, 0, 0.2);
  position: absolute;
}

In questo modo le tre immagini vanno a sovrapporsi e non c’è modo di capire a colpo d’occhio che si tratta di una pila. Poco male: possiamo risolvere ruotando un po’ la prima e l’ultima immagine:
.pila img:first-child {
  -webkit-transform: rotate(1deg);
  -moz-transform: rotate(1deg);
  -o-transform: rotate(1deg);
  -ms-transform: rotate(1deg);
  transform: rotate(1deg);
}
 
.pila img:last-child {
  -webkit-transform: rotate(-1deg);
  -moz-transform: rotate(-1deg);
  -o-transform: rotate(-1deg);
  -ms-transform: rotate(-1deg);
  transform: rotate(-1deg);
}

Molto meglio! Ora non resta che aumentare la rotazione di queste due immagini all’hover:
.pila:hover img:first-child {
  -webkit-transform: rotate(30deg);
  -moz-transform: rotate(30deg);
  -o-transform: rotate(30deg);
  -ms-transform: rotate(30deg);
  transform: rotate(30deg);
}
 
.pila:hover img:last-child {
  -webkit-transform: rotate(-30deg);
  -moz-transform: rotate(-30deg);
  -o-transform: rotate(-30deg);
  -ms-transform: rotate(-30deg);
  transform: rotate(-30deg);
}

Anche se questo effetto non è spiacevole, non ti permette di vedere le immagini nella loro interezza. Questo perché le immagini ruotano sul proprio centro. Ci servirebbe qualcosa che spostasse il punto di rotazione delle immagini. Possiamo farlo con l’istruzione transform-origin che, applicata all’elemento da ruotare, ci permette di decidere quale deve essere il fulcro della rotazione. Spostiamolo in basso al centro, in modo da aprire le immagini “a ventaglio”:
.pila img {
  border: 15px solid #ffe;
  -webkit-box-shadow: 12px 12px 10px rgba(0, 0, 0, 0.2);
  box-shadow: 12px 12px 10px rgba(0, 0, 0, 0.2);
  position: absolute;
  -webkit-transform-origin: center 700px;
  -moz-transform-origin: center 700px;
  -o-transform-origin: center 700px;
  -ms-transform-origin: center 700px;
  transform-origin: center 700px;
}