Ho un cubo che ruota su se stesso, utilizzando solo CSS (@keyframes transform). Le facce che vengono mostrate, nel movimento rotatorio, sono 6 (quindi tutte), ma nessuna mai frontalmente (vedi immagine sotto)
Senza-titolo-1.jpg
E questo è il CSS:
codice:
@keyframes transform {    0% {
        transform: translatey(0px);
        transform-style: preserve-3d;
        transform: rotateX(-15deg) rotateY(15deg);
        _3dface--front
    }
    20% {
        transform: rotateY(70deg) rotateX(-40deg);
    }
    36% {
        transform: rotateY(-60deg) rotateX(-40deg);
    }
    52% {
        transform: rotateX(60deg) rotateY(30deg);
    }
    68% {
        transform: rotateX(-60deg) rotateY(40deg);
    }
    84% {
        transform: rotateY(160deg) rotateX(20deg);
    }
    100% {
        transform: translatey(0px);
        transform-style: preserve-3d;
        transform: rotateX(-15deg) rotateY(15deg);
    }
}
Vorrei far sì che, ad ogni movimento del cubo, la faccia che si presenta verso l'osservatore avesse opacity: 1, mentre le altre opacity: 0.7
Come posso ottenere questo risultato? L'unico modo è fare la stessa serie di keyframes per ciascuna faccia del cubo?