Não consegui entender porque aparece o amarelo na parte inferior se ele foi designado no CSS para parte superior do cubo. Tanto no que eu fiz quanto no do exemplo da dabblet
Solucionado
Não consegui entender porque aparece o amarelo na parte inferior se ele foi designado no CSS para parte superior do cubo. Tanto no que eu fiz quanto no do exemplo da dabblet
Boa tarde, Márcia! Tudo bem com você? =)
Bem observado! Os valores translateY das classes cima e baixo estão invertidos! Valores positivos levam a face mais para baixo, enquanto que valores positivos, para cima.
Logo, o correto seria:
.cima {
transform: translateY(-100px) rotateX(90deg);
}
.baixo {
transform: translateY(100px) rotateX(-90deg);
}Espero ter ajudado! =)
Abraço e bons estudos,
Fábio