Испытание: раскладка карт [32/32]


#1

Подскажите, пожалуйста, почему при проверке так получается?


#2

Может потому что z-index не поставили? Похожая тема Задание 32


#3

Z-index как только не пробовала уже менять(


#4
.ten {

transform: rotate(-10deg) scale(0.8) translate(45px, 20px)

}
.jack {

transform: rotate(-5deg) scale(0.9) translate(20px, -0px)  

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


#5

Подскажите пожалуйста.
Почему валет и король не встают на место?

CSS

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;
}
.queen{
transform: translateY(-5px);
z-index:2;
}
.jack{
transform: rotate(-5deg) scale (0.9) translateX(20px);
z-index:1;
}
.king {
transform: rotate(5deg) scale (0.9) translateX(-20px);
z-index:1;
}
.ten {
transform: rotate(-10deg) scale(0.8) translateX(45px) translateY(20px);
}
.ace {
transform: rotate(10deg) scale(0.8) translateX(-45px) translateY(20px);
}


#6

Проблема в пробелах в функции трансформации scale.

При подобных ошибок в синтаксисе, свойство не будет применяться к объекту. Тоже самое и с Jack-ом.

И, конечно же, надо будет подумать об рациональном использовании z-index.


#7

100%

.queen {transform: translateY(-5px);}

.jack {transform: rotate(-5deg) scale(0.9) translateX(20px);}

.king {z-index: -1; transform: rotate(5deg) scale(0.9) translateX(-20px);}

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

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


#8

100%

.ten {
    transform: rotate(-10deg) 
               scale(0.8) 
               translate(45px, 20px);
}
.jack {
    transform: rotate(-5deg) 
               scale(0.9) 
               translate(20px, 0px);
}
.queen { transform: translate(0, -5px); }
.king {
    transform: rotate(5deg) 
               scale(0.9) 
               translate(-20px, 0px); 
    z-index: -1;
}
.ace {
    transform: rotate(10deg) 
               scale(0.8) 
               translate(-45px, 20px); 
    z-index: -2;
}

#9

Не знаю насколько это сейчас актуально… http://htmlbook.ru/css/z-index

Хотя спецификация и разрешает использовать отрицательные значения z-index, но такие элементы не отображаются в браузере Firefox до версии 2.0 включительно.


#10

Да это всё понятно, легче было сделать немного изменить верстку (поменять местами элементы) и задавать у них положительные z-index начиная с самого большого (Дама пик) и уменьшая у других. :slight_smile:


#11

Вот чисто визуально кажется что немного не так…Валет и король видно, что прям на пиксель должны больше вылезать из под дамы, но так как в теории говорится, что значения должны быть кратны 5 и тест проходит - то пусть так…:slight_smile:

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) translate(45px,20px);
}

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

.king {
    z-index: -1;
    transform: rotate(5deg) scale(0.9) translate(-20px);
}

.queen {
    transform: translateY(-5px);
}

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

И когда меняешь значения translate подбором зрительно перфекционист внутри меня ликует, а тест уже 90% :scream_cat:

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) translate(43px,20px);
}

.jack {
    transform: rotate(-5deg) scale(0.9) translate(19px);
}

.king {
    z-index: -1;
    transform: rotate(5deg) scale(0.9) translate(-19px);
}

.queen {
    transform: translateY(-5px);
}

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

#12

А зачем прописывать нулевой второй параметр к функции translate? Не лучше ли использовать translateX().