HTML<ul class="contenedor">
<li class="elemento3d n1"><img src="https://lh3.googleusercontent.com/-r0_rnH6EA88/U9Y2SKOQ2AI/AAAAAAAAt8I/nJRvLgzbUp0/w240-h320-no/1175362.gif" alt="" width="124" height="166" /></li>
<li class="elemento3d n2"><img src="https://lh4.googleusercontent.com/-kFpT5HvGjqU/U9Y3x1rOVoI/AAAAAAAAt-A/mASyABcItak/w240-h320-no/1173736.gif" alt="" width="124" height="166" /></li>
<li class="elemento3d n3"><img src="https://lh5.googleusercontent.com/-g8ZX9BZjPLk/U9Y5wNDioCI/AAAAAAAAuCk/RY_Kh5KI3cg/w240-h320-no/1170601.gif" alt="" width="124" height="166" /></li>
</ul>

CSS<style><!--
.n1{transform: rotate3d(0, 0, 1, 20deg);}
.n2{transform: rotate3d(0, 1, 0, 20deg);}
.n3{transform: rotate3d(1, 0, 0, 20deg);}
.n4{transform: rotate3d(1, 0, 1, 40deg);}
.n5{transform: rotate3d(1, 0, 0, 40deg);}
.contenedor {
  padding: 0;
  margin: 0 auto;
  list-style: none;
  display: flex;
  flex-direction :row;
  flex-wrap: wrap;
  justify-content: space-around;
  align-items:center;
  height:300px;width:460px;
  perspective:400px;
}
.elemento3d{
  text-align:center center;
  padding: 40px;cursor:pointer;
  border: 2px dotted #ccc; 
 border-radius: 10px;
 box-shadow: 3px 2px 6px #000000;
  line-height: 10px;
  color: white;
  font-weight: bold;
  font-size: 40px;
  width:40px;
  background-color:#fff;
  -webkit-box-shadow: 0px 5px 7px 0px rgba(50, 50, 50, 0.75);
  -moz-box-shadow:    0px 5px 7px 0px rgba(50, 50, 50, 0.75);
  box-shadow:         0px 5px 7px 0px rgba(50, 50, 50, 0.75);
}
.elemento3d:hover{
 transform: rotate3d(0, 0, 0, 30deg); 
}
--></style>