Абсолютное позиционирование

Используя absolute выведите карты на расстоянии 50% слева и 50 пикселей сверху, как показано на рис. 1.

Рис. 1

Файлы

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Карты</title>
  <style>
   .cards {
    position: absolute;
    left: 50%;
    top: 50px;
    transform-origin: 50% 100%;
   }
   .card1 { 
    transform: rotateZ(-15deg);
   }
   .card3 {
    transform: rotateZ(15deg);
   }
   .cards:hover {
    z-index: 2;
   }
  </style>
 </head>
 <body>
  <img src="image/3.png" alt="Тройка" class="cards card1" width="145" height="227">
  <img src="image/7.png" alt="Семёрка" class="cards card2" width="145" height="227">
  <img src="image/ace.png" alt="Туз" class="cards card3" width="145" height="227">
 </body>
</html>