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
Você está vendo a versão anterior da nova experiência da Alura que estamos preparando para você. Em breve, ela ganha uma identidade visual novinha totalmente pensada em potencializar seus estudos!
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