perspective() Probleme mit Perspektive behoben?

Question

Ich habe eine Flip-Animation, wo ich Perspektive benutze, habe ich eine einfache Karte, die kippt, wenn sie schwebte. Aus meinem Verständnis die Perspektive Eigenschaft und die Transform Eigenschaft Perspektive() sind die gleichen, außer Perspektive auf die Eltern angewendet wird und auf seine Kinder gerendert und die Perspektive() direkt auf ein Element angewendet wird, die Sie Perspektive haben wollen, ist das richtig? Ich habe zuerst die perspective-Eigenschaft verwendet und dann festgestellt, dass ich meinen Code mithilfe von perspective() etwas vereinfachen konnte, also habe ich ihn geändert. Wenn Sie mit der Perspektive() über die Karte fahren, funktioniert die Animation, aber wenn Sie die Maus aus- und wieder einschalten, bevor die Animation ganz am Anfang der Animation endet, erhalten Sie seltsame Ergebnisse. Die Rückseite der Karte wird durch die Vorderseite angezeigt und die Karte wird sich über den Bildschirm erstrecken, all dieses seltsame Verhalten hört auf, wenn ich der Karte einen Elternteil mit einer perspektivischen Eigenschaft gebe und die Perspektive lösche(), also ist das ein Browserfehler oder versteh ich die Unterschiede nicht richtig oder gibt es welche andere Eigenschaft muss ich mit Perspektive() verwenden, dass ich nicht bewusst bin?

zwei Versionen von CSS mit Ergebnissen

Perspektive: 1000px; https://fiddle.jshell.net/rqzwoguw/28/

Transformation: Perspektive (1000px); https://fiddle.jshell.net/rqzwoguw/29/ // Bewegen Sie die Maus am Anfang oder am Mittelpunkt des Übergangs.

Answer 1

Halten Sie die Perspektive konstant, ändern Sie sie nicht bei Hover.

Fügen Sie einfach .card: (keine Rotation, aber die gleiche pespective, die Sie auf schweben setzen)

transform: perspective(1000px) rotateY(0deg); 

.front, 
 
.back, 
 
.card { 
 
    width: 100px; 
 
    height: 170px; 
 
    border-radius: 10px; 
 
    text-align: center; 
 
} 
 

 
.card { 
 
    position: relative; 
 
    transition: transform 1s ease-in-out 0s; 
 
    transform-style: preserve-3d; 
 
    transform-origin: right; 
 
    transform: perspective(1000px) rotateY(0deg); 
 
} 
 

 
.card:hover { 
 
    transform: perspective(1000px) rotateY(180deg); 
 
} 
 

 
.front { 
 
    background-color: red; 
 
} 
 

 
.back { 
 
    background-color: blue; 
 
    transform: rotateY(180deg); 
 
    position: absolute; 
 
    top: 0px; 
 
    z-index: -1; 
 
}

<div class="card"> 
 
    <div class="front"> 
 
    FRONT 
 
    </div> 
 
    <div class="back"> 
 
    BACK 
 
    </div> 
 
</div>