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:
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.7codice:@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); } }
Come posso ottenere questo risultato? L'unico modo è fare la stessa serie di keyframes per ciascuna faccia del cubo?