Испытание: раскладка карт

В этом испытании вам предстоит расположить карты веером, пользуясь функциями translate, scale и rotate.

Подсказка: значения функций rotate и translate кратны 5 (если трансформации прописывать в порядке: rotate, scale, translate), а scale уменьшает карты с шагом 10%.

Решение

Решение испытания будет доступно через несколько минут. Используйте его, если возникнут сложности. А пока попытайтесь пройти испытание самостоятельно.

html,
body {
  margin: 0;
  padding: 0;
  width: 570px;
  height: 250px;
}

.deck {
  margin: 0 auto;
  padding-top: 50px;
  width: 570px;
}

.deck > img {
  position: relative;
  display: inline-block;
  margin-right: -4px;
  width: 110px;
}

img.ten {
  transform: rotate(-10deg) scale(0.8) translate(45px, 20px);
}

img.jack {
  transform: rotate(-5deg) scale(0.9) translate(20px, 0);
}

img.queen {
  z-index: 10;
  transform: translate(0, -5px);
}

img.king {
  transform: rotate(5deg) scale(0.9) translate(-20px, 0);
}

img.ace {
  z-index: -1;
  transform: rotate(10deg) scale(0.8) translate(-45px, 20px);
}

Притормози, дружище

Проходить вызовы части «Двумерные трансформации» тренажёра «Продвинутые декоративные эффекты» можно после регистрации и оформления подписки.

Зарегистрироваться