Wie kann ich diesen css card flip Übergang beheben?

Ich versuche, zwei divs, in einem Elternteil, mit einem div mit einer Klasse von Front und die andere mit einer Klasse von zurück zu erstellen. Ich versuche, den hinteren umzudrehen und ihn unter den vorderen zu legen. Wenn ich also den Elternteil umlege, wird der hintere angezeigt und wenn er wieder umgedreht wird, wird der vordere angezeigt, wodurch eine dreidimensionale Karte entsteht, die beim Schweben umkippt. Wo auch immer sich die Rückseite mit der Vorderseite überschneidet, ist die Vorderseite nur sichtbar, egal ob von vorne oder von hinten betrachtet. Ich habe versucht, Hintergrund-Sichtbarkeit zu verwenden: versteckt auf beiden, die aus meiner Sicht die Rückseite des div nicht sichtbar machen sollte, wenn es umgedreht wird, aber dies führt dazu, dass der Rücken vollständig verschwindet und es keine Wirkung auf der Vorderseite hat. Ich weiß, dass das möglich ist, weil ich gesehen habe, dass jemand das macht, aber was mache ich hier falsch und wie kann ich diese Probleme beheben?Wie kann ich diesen css card flip Übergang beheben?

https://fiddle.jshell.net/h8vz85b3/2/

<!DOCTYPE html> 
<html> 
    <head> 
     <title> media test</title> 
     <meta charset="utf-8"> 
     <meta name="keywords" content="test,css, css test"> 
     <meta name="description" content="A CSS test and review."> 
     <meta name="author" content="brandon lind"> 
     <link rel="stylesheet" media="screen" href="css/main.css"> 
     <style> 
      .parent{ 
       transition: transform 1s ease-in-out 0s; 
       width: 100px; 
      } 
      .parent:hover { 
       transform: rotateY(180deg); 
      } 
      .back,.front{ 
       width: 100px; 
       height: 170px; 
       //backface-visibility: hidden; 

      } 
      .front{ 
       background-color: blue; 
       transform: translate(0, -150px); 
      } 
      .back{ 
       background-color: red; 
       transform: rotateY(190deg);   
      } 
     </style> 
    </head> 
    <body> 
     <div class="parent"> 
      <div class="back"> 
       back 
      </div> 
      <div class="front"> 
       front 
      </div> 
     </div> 
    </body> 
</html>

Quelle

2017-05-26 alexis

Edit: der Code ein wenig vereinfacht.

Sie können das Problem der Vorderseite immer oben zeigt, indem transform-style: preserve-3d lösen. Sie möchten auch unbedingt backface-visibility: hidden einschließen, wie es Ihr Instinkt war.

Auch werden Sie es leichter haben die Kartenflächen auf der jeweils anderen zu positionieren, wenn Sie statt Übersetzungen absolute Positionierung verwenden, also habe ich für Sie diese Änderung vorgenommen.

Das Beispiel unten funktioniert für mich ganz gut, ohne eine z-index zu deklarieren, aber wenn Sie Probleme mit dem Rücken statt anfänglich anstatt der Front auftreten, können Sie einfach geben Sie die vordere div eine höhere z-index als die hintere div.

.parent { 
 
    transition: transform 1s ease-in-out 0s; 
 
    transform-style: preserve-3d; 
 
    width: 100px; 
 
} 
 
.parent:hover { 
 
    transform: rotateY(180deg); 
 
} 
 
.back, 
 
.front { 
 
    width: 100px; 
 
    height: 170px; 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    backface-visibility: hidden; 
 
} 
 
.front { 
 
    background-color: blue; 
 
} 
 
.back { 
 
    background-color: red; 
 
    transform: rotateY(180deg); 
 
}

<div class="parent"> 
 
    <div class="back"> 
 
    back 
 
    </div> 
 
    <div class="front"> 
 
    front 
 
    </div> 
 
</div>

Quelle

2017-05-26 20:18:00 cjl750

Wie kann ich diesen css card flip Übergang beheben?

Antwort

Verwandte Themen