Как сделать блок изображений в виде колоды карт?

.items { 
  width: 140px; 
  height: 200px; 
  margin: 50px auto; 
  position: relative; 
  transform: rotate(10deg); 
} 
 
.item { 
  position: absolute; 
  top: 0; 
  left: 0; 
  right: 0; 
  bottom: 0; 
  transform-origin: 50% 200% 0; 
  outline: 1px solid #fbfbfb; 
} 
 
.item:nth-of-type(1) { 
  transform: rotate(-45deg); 
} 
 
.item:nth-of-type(2) { 
  transform: rotate(-30deg); 
} 
 
.item:nth-of-type(3) { 
  transform: rotate(-15deg); 
} 
 
.item:nth-of-type(4) { 
  transform: rotate(0deg); 
} 
 
.item:nth-of-type(5) { 
  transform: rotate(15deg); 
} 
 
.item:nth-of-type(6) { 
  transform: rotate(30deg); 
}

<div class="items"> 
  <div class="item"> 
    <img src="http:placehold.it/140x200" alt=""> 
  </div> 
  <div class="item"> 
    <img src="http:placehold.it/140x200" alt=""> 
  </div> 
  <div class="item"> 
    <img src="http:placehold.it/140x200" alt=""> 
  </div> 
  <div class="item"> 
    <img src="http:placehold.it/140x200" alt=""> 
  </div> 
  <div class="item"> 
    <img src="http:placehold.it/140x200" alt=""> 
  </div> 
  <div class="item"> 
    <img src="http:placehold.it/140x200" alt=""> 
  </div> 
</div>

.card { 
  display:inline-block; 
  width:144px; 
  height:209px; 
  border:1px solid black; 
  border-radius:5px; 
} 
.clubs_10 { 
  background:url(https://raw.githubusercontent.com/hayeah/playing-cards-assets/master/png/10_of_clubs.png); 
  background-size: cover; 
  background-color:lightgrey; 
} 
.diamonds_king { 
  background:url(https://raw.githubusercontent.com/hayeah/playing-cards-assets/master/png/king_of_diamonds.png); 
  background-size: cover; 
  background-color:lightgrey; 
  margin-left:-136px; 
  margin-bottom:-10px; 
} 
.hearts_queen { 
  background:url(https://raw.githubusercontent.com/hayeah/playing-cards-assets/master/png/queen_of_hearts.png); 
  background-size: cover; 
  background-color:lightgrey; 
  margin-left:-136px; 
  margin-bottom:-20px; 
}

<div class="card clubs_10"></div> 
<div class="card diamonds_king"></div> 
<div class="card hearts_queen"></div>

* { 
  margin: 0; 
  padding: 0; 
} 
 
html, 
body { 
  width: 100%%; 
  height: 100%; 
  background: #272727; 
  color: #fff; 
} 
 
.images { 
  position: relative; 
} 
 
img { 
  position: absolute; 
} 
 
img:nth-child(2) {top: 10px;left: 10px;} 
img:nth-child(3) {top: 20px;left: 20px;} 
img:nth-child(4) {top: 30px;left: 30px;} 
img:nth-child(5) {top: 40px;left: 40px;}

<div class="images"> 
  <img src="http://via.placeholder.com/250x250/ff00ff/00ff00"> 
  <img src="http://via.placeholder.com/250x250/c009ff/ff0000"> 
  <img src="http://via.placeholder.com/250x250/0000ff/000fff"> 
  <img src="http://via.placeholder.com/250x250/dd00ff/000000"> 
  <img src="http://via.placeholder.com/250x250/0d00ff/fff000"> 
</div>