Проверте пожалуйста! Двумерные трансформации [32/32]

Курсы §22. Двумерные трансформации
1

подганял как мог, понимаю что не правильно, но все же 95%

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

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

.deck > img {
position: relative;
display: inline-block;
width: 110px;
margin-right: -4px;
}
.ten {
transform: translateX(38px) translateY(9px) scale(0.8) rotate(-10deg)
}
.jack {
transform: translateX(17px) translateY(-2px) scale(0.9) rotate(-5deg);

}
.queen {
transform: translateY(-5px);
z-index: 10;
}
.king {
transform: translateX(-17px) translateY(-2px) scale(0.9) rotate(5deg);
z-index: 5;
}
.ace {
transform: translateX(-38px) translateY(10px) scale(0.8) rotate(10deg)
}

`

2

Большое значение в трансформациях имеет порядок функций. В данном случае это сначала rotate, затем scale и только потом translate. У translate будут другие координаты.

3

спасибо

4

этот порядок нужно соблюдать постоянно, или есть другие случаи?

5

100%

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

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

.deck > img {
position: relative;
display: inline-block;
width: 110px;
margin-right: -4px;
}
.ten {
transform: rotate(-10deg) scale(0.8) translateX(45px) translateY(20px)
}
.jack {
transform: rotate(-5deg) scale(0.9) translateX(20px) ;

}
.queen {
transform: translateY(-5px);
z-index: 10;
}
.king {
transform: rotate(5deg) scale(0.9) translateX(-20px) ;
z-index: 5;
}
.ace {
transform: rotate(10deg) scale(0.8) translateX(-45px) translateY(20px)
}

1 лайк
6

Могут быть и другие. Это порядок именно для этого задания.