CSS 3D-Würfel: Würfel visuell auf einer anderen Zahl landen lassen [geschlossen] ⇐ JavaScript

[Guest]

Ich nehme zwei verschiedene Würfel-Codepens, einen W20-Würfelwurf hier: https://codepen.io/vicentemundim/pen/nXNvBw und wirbelnde Polyederwürfel hier: https://codepen.io/vcurd/pen/RwaQPrb . Mein Ziel ist es, alle Polyeder-Würfelformen aus diesem zweiten Codepen zu haben, sie aber mit einem Klick zu würfeln, ich beginne mit einem W8. Ich habe die W8-Form mit Zahlen darauf und er würfelt – aber ich schaffe es scheinbar nicht, die Würfel auf einer anderen Zahl landen zu lassen. Hinter den Kulissen ändert sich das Attribut der Datenseite zu einem anderen Wurf, aber optisch landen die Würfel auf der Seite, wobei 2 nach oben und 7 nach unten zeigt.
Das ist mein Codepen : https://codepen.io/bookluvr416/pen/qEWymxX. Meistens stammen HTML und CSS von den wirbelnden Polyederwürfeln, die JS stammen vom Würfelwurf. Einige Ergänzungen zum CSS aus dem Dice Roll Codepen. Ich habe noch nie zuvor mit Animationen gespielt, dies ist für ein Lieblingsprojekt, das ich machen möchte.
Aus dem Codepen:
Das JS beginnt indem Sie einige Variablen initialisieren und das Element auswählen:

Code: Select all

let d8 = document.querySelector('#d8'),
sides = 8,
initialSide = 0,
lastFace;

Das js, das beim Rollklick ausgelöst wird:

Code: Select all

const onClickHandler = () => {
let face;
console.log('got here');
d8.classList.add('rolling')

timeoutId = setTimeout(function () {
face = randomFace();

d8.classList.remove('rolling');
d8.setAttribute('data-face', null);
console.log(face);
d8.setAttribute('data-face', face)
}, 3000);

return false;
}

Es fügt dem Element eine rollende Klasse hinzu, wartet auf eine Zeitüberschreitung, ruft dann eine Funktion auf, die einige Berechnungen durchführt, um die nächste Würfelseite zu erhalten, und entfernt dann die Klasse und setzt das Datenelement data-face in das neue Gesicht.
Das entsprechende HTML sieht so aus:

Code: Select all

Roll!

Auf der CSS-Seite wird die Keyframes-Animation wie folgt angegeben:

Code: Select all

@keyframes roll {
10% { transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg) }
30% { transform: rotateX(120deg) rotateY(240deg) rotateZ(0deg) translateX(40px) translateY(40px) }
50% { transform: rotateX(240deg) rotateY(480deg) rotateZ(0deg) translateX(-40px) translateY(-40px) }
70% { transform: rotateX(360deg) rotateY(720deg) rotateZ(0deg) }
90% { transform: rotateX(480deg) rotateY(960deg) rotateZ(0deg) }
}

Die rollende Klasse, die die Animation in Gang setzt:

Code: Select all

.rolling {
transform-style: preserve-3d;
animation: roll 9s infinite ease-in-out;
}

Und dann ist das das gesamte CSS, das die Form des d8 erstellt:

Code: Select all

#dice {
position: absolute;
top: 50%;
left: 50%;
transform-style: preserve-3d;
transform: perspective(800px);
}
#d8 {
transform-style: preserve-3d;
transform: perspective(800px);
}
#d8-wrap {
transform-style: preserve-3d;
transform: translateX(-346.41px) translateZ(-200px);
}

.d8 {
--width: 50px;
--height: calc(0.8660254 * var(--width));
--center: 0.288675;
--center-height: calc(var(--height)*var(--center));
--co-center: calc((0.5 - var(--center))*var(--height));
--offset: 0.33;
--dihedral-angle: 54deg;
--co-dihedral: calc(90deg - var(--dihedral-angle));
--extrude: calc(var(--width)*var(--offset));
--luminance: 100%;
font-size: 1.5rem;
width: calc(2 * var(--width));
height: calc(2 * var(--height));
background-color: hsla(190,10%,var(--luminance),0.3);
position: absolute;
clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
transform-origin: 50% 28.8675%;
transform-style: preserve-3d;
backface-visibility: hidden;
}

.d8[data-side='1']{
--luminance: 65%;
transform: rotateY(90deg) rotateX(var(--co-dihedral)) translateZ(var(--extrude));
}
.d8[data-side='2']{
--luminance: 70%;
transform: rotateX(var(--co-dihedral)) translateZ(var(--extrude));
}
.d8[data-side='3']{
--luminance: 75%;
transform: rotateY(180deg) rotateX(var(--co-dihedral)) translateZ(var(--extrude));
}
.d8[data-side='4']{
--luminance: 80%;
transform: rotateY(270deg) rotateX(var(--co-dihedral)) translateZ(var(--extrude));
}
.d8[data-side='5']{
--luminance: 85%;
transform: rotateX(180deg) translateY(calc(var(--co-center) - (2* var(--height)))) rotateX(var(--co-dihedral)) translateZ(var(--extrude));
}
.d8[data-side='6']{
--luminance: 90%;
transform: rotateX(180deg) rotateY(90deg) translateY(calc(var(--co-center) - (2* var(--height)))) rotateX(var(--co-dihedral)) translateZ(var(--extrude));
}
.d8[data-side='7']{
--luminance: 95%;
transform: rotateX(180deg) rotateY(180deg) translateY(calc(var(--co-center) - (2* var(--height)))) rotateX(var(--co-dihedral)) translateZ(var(--extrude));
}
.d8[data-side='8']{
--luminance: 100%;
transform: rotateX(180deg) rotateY(270deg) translateY(calc(var(--co-center) - (2* var(--height)))) rotateX(var(--co-dihedral)) translateZ(var(--extrude));
}

.d8::after {
background-color: transparent;
position: absolute;
content: attr(data-side);
bottom: calc((100%*var(--center)) - 0.5em);
text-align: center;
left: 0;
right: 0;
}

Ich habe den Würfelwurf-Animationscode studiert und versucht, das HTML/CSS so zu erstellen, dass man Klassen und Schrittzähler verwendet, um die Zahlen der Seiten festzulegen – und Am Ende hatte ich immer noch das gleiche Problem, dass die Würfel optisch an der gleichen Stelle landen.
Das sieht so aus, als würde man das Würfel-HTML-Div wie folgt ändern:

Code: Select all

Ab dem d8-Klassen-CSS sieht das relevante CSS so aus. Ich habe das .d8[data-side] CSS durch .d8.face-# CSS ersetzt und etwas :first-child, ::before, hinzugefügt und das ::after.
geändert

Code: Select all

.d8.face-0{
--luminance: 65%;
transform: rotateY(90deg) rotateX(var(--co-dihedral)) translateZ(var(--extrude));
}
.d8.face-1{
--luminance: 70%;
transform: rotateX(var(--co-dihedral)) translateZ(var(--extrude));
}
.d8.face-2{
--luminance: 75%;
transform: rotateY(180deg) rotateX(var(--co-dihedral)) translateZ(var(--extrude));
}
.d8.face-3{
--luminance: 80%;
transform: rotateY(270deg) rotateX(var(--co-dihedral)) translateZ(var(--extrude));
}
.d8.face-4{
--luminance: 85%;
transform: rotateX(180deg) translateY(calc(var(--co-center) - (2* var(--height)))) rotateX(var(--co-dihedral)) translateZ(var(--extrude));
}
.d8.face-5{
--luminance: 90%;
transform: rotateX(180deg) rotateY(90deg) translateY(calc(var(--co-center) - (2* var(--height)))) rotateX(var(--co-dihedral)) translateZ(var(--extrude));
}
.d8.face-6{
--luminance: 95%;
transform: rotateX(180deg) rotateY(180deg) translateY(calc(var(--co-center) - (2* var(--height)))) rotateX(var(--co-dihedral)) translateZ(var(--extrude));
}
.d8.face-7{
--luminance: 100%;
transform: rotateX(180deg) rotateY(270deg) translateY(calc(var(--co-center) - (2* var(--height)))) rotateX(var(--co-dihedral)) translateZ(var(--extrude));
}

.d8 {
counter-increment: steps 1;
}
.d8:first-child {
counter-increment: steps 0;
}
.d8::before {
content: counter(steps);
}
.d8::after {
content: counter(steps);
background-color: transparent;
position: absolute;
bottom: calc((100%*var(--center)) - 0.5em);
text-align: center;
left: 0;
right: 0;
}

Mit dem oben Gesagten landet der Code jetzt auf der Seite, wobei 1 nach oben und 6 nach unten zeigt.
Kann mir jemand helfen? Ich bin mir nicht sicher, was ich falsch gemacht habe oder wie ich es beheben kann. Ich weiß nicht genug über CSS oder Animationen, um überhaupt mit dem Debuggen oder der Fehlersuche zu beginnen, die über das hinausgeht, was ich bereits getan habe.