CSS 3D Rotation funktioniert nicht mit Spaltenlayout auf Chrome

Question

Ich muss die Transformation von einigen Divs klicken in einem HTML-Knoten zu steuern. Wenn diese Divs mit einer Anzeige "Inline-Block" sind, funktioniert es in Ordnung, aber wenn ich sie in ein Spaltenlayout mit css3 einpacke, funktionieren sie nicht (außer in der ersten Spalte!)

Überprüfen Sie diese Geige: https://jsfiddle.net/madelavega/hjyntsob/

Im ersten Teil, mit dem Spaltenlayout, funktioniert nur die erste Spalte: Klicken Sie auf "Flip" und dann auf "Ich arbeite", achten Sie auf den CSS-Hover-Stil; in der 2. und 3. Spalte funktioniert es nicht.

Im zweiten Teil, mit dem Display Inline-Block funktioniert es OK.

Ich brauche das Spaltenlayout, aber es scheint ein Chrome-Bug zu sein, denn es funktioniert gut unter Firefox. Weiß jemand davon?

$('.flip').click(function (evt) { 
 
\t $(evt.currentTarget).parents('.card').addClass('flipped'); 
 
}); 
 

 
$('.i-doesnt-work').click(function (evt) { 
 
\t $(evt.currentTarget).parents('.card').removeClass('flipped'); 
 
})

/** Column*/ 
 
.content { 
 
    -webkit-column-count: 3; 
 
    -webkit-column-gap: 0px; 
 
    -moz-column-count: 3; 
 
    -moz-column-gap:  0px; 
 
    column-count:   3; 
 
    column-gap:   0px; 
 
} 
 

 
/* Inline-block*/ 
 
.content-di { 
 
    display: inline-block; 
 
} 
 

 
.card { 
 
    display: inline-block; 
 
    width: 150px; 
 
    height: 100px; 
 
    background: red; 
 
    margin: 3px; 
 
    -webkit-transition: -webkit-transform 1s; 
 
    -moz-transition: -moz-transform 1s; 
 
    -o-transition: -o-transform 1s; 
 
    transition: transform 1s; 
 
    -webkit-transform-style: preserve-3d; 
 
    -moz-transform-style: preserve-3d; 
 
    -o-transform-style: preserve-3d; 
 
    transform-style: preserve-3d; 
 
    -webkit-transform-origin: right center; 
 
    -moz-transform-origin: right center; 
 
    -o-transform-origin: right center; 
 
    transform-origin: right center; 
 
} 
 

 
.card.flipped { 
 
    -webkit-transform: translateX(-100%) rotateY(-180deg); 
 
    -moz-transform: translateX(-100%) rotateY(-180deg); 
 
    -o-transform: translateX(-100%) rotateY(-180deg); 
 
    transform: translateX(-100%) rotateY(-180deg); 
 
} 
 

 
.front { 
 
    -webkit-backface-visibility: hidden; 
 
    -moz-backface-visibility: hidden; 
 
position: absolute; 
 
    -o-backface-visibility: hidden; 
 
    backface-visibility: hidden; 
 
    -ms-backface-visibility: hidden; 
 
    -webkit-backface-visibility: visible; 
 
} 
 

 
.back { 
 
    webkit-transform: rotateY(180deg); 
 
    -moz-transform: rotateY(180deg); 
 
    -o-transform: rotateY(180deg); 
 
    transform: rotateY(180deg); 
 
    position: absolute; 
 
    color: #fff; 
 
    height: 100%; 
 
    top: 0px; 
 
    width: 100%; 
 
    background: #000; 
 
    -moz-backface-visibility: hidden; 
 
    -o-backface-visibility: hidden; 
 
    backface-visibility: hidden; 
 
    -webkit-backface-visibility: visible; 
 
} 
 

 
.flip { 
 
    cursor: pointer; 
 
} 
 

 
.flipped .i-doesnt-work { 
 
    cursor: pointer; 
 
} 
 

 
.flipped .i-doesnt-work:hover { 
 
    background: blue; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div>Column layout</div> 
 
<div class="content"> 
 

 
    <div class="card"> 
 
    <div class="front"> 
 
     <span class="flip">Flip</span> 
 
    </div> 
 
    <div class="back"> 
 
     <span class="i-doesnt-work">I work!</span> 
 
    </div> 
 
    </div> 
 

 
    <div class="card"> 
 
    <div class="front"> 
 
     <span class="flip">Flip</span> 
 
    </div> 
 
    <div class="back"> 
 
     <span class="i-doesnt-work">I work!</span> 
 
    </div> 
 
    </div> 
 

 
    <div class="card"> 
 
    <div class="front"> 
 
     <span class="flip">Flip</span> 
 
    </div> 
 
    <div class="back"> 
 
     <span class="i-doesnt-work">I doesn't work!</span> 
 
    </div> 
 
    </div> 
 

 
    <div class="card"> 
 
    <div class="front"> 
 
     <span class="flip">Flip</span> 
 
    </div> 
 
    <div class="back"> 
 
     <span class="i-doesnt-work">I doesn't work!</span> 
 
    </div> 
 
    </div> 
 

 
    <div class="card"> 
 
    <div class="front"> 
 
     <span class="flip">Flip</span> 
 
    </div> 
 
    <div class="back"> 
 
     <span class="i-doesnt-work">I doesn't work!</span> 
 
    </div> 
 
    </div> 
 

 
</div> 
 
<div>Display: inline-block</div> 
 
<div class="content-di"> 
 
    <div class="card"> 
 
    <div class="front"> 
 
     <span class="flip">Flip</span> 
 
    </div> 
 
    <div class="back"> 
 
     <span class="i-doesnt-work">I work!</span> 
 
    </div> 
 
    </div> 
 
    <div class="card"> 
 
    <div class="front"> 
 
     <span class="flip">Flip</span> 
 
    </div> 
 
    <div class="back"> 
 
     <span class="i-doesnt-work">I work too!</span> 
 
    </div> 
 
    </div> 
 
    <div class="card"> 
 
     <div class="front"> 
 
     <span class="flip">Flip</span> 
 
     </div> 
 
     <div class="back"> 
 
     <span class="i-doesnt-work">I work too!</span> 
 
     </div> 
 
    </div> 
 
     <div class="card"> 
 
     <div class="front"> 
 
     <span class="flip">Flip</span> 
 
     </div> 
 
     <div class="back"> 
 
     <span class="i-doesnt-work">I work too!</span> 
 
     </div> 
 
    </div> 
 
     <div class="card"> 
 
     <div class="front"> 
 
     <span class="flip">Flip</span> 
 
     </div> 
 
     <div class="back"> 
 
     <span class="i-doesnt-work">I work too!</span> 
 
     </div> 
 
    </div> 
 
</div>

Answer 1

Für alle Interessierten haben wir dieses Problem gelöst (die sich um einen Fehler in Chrome sein könnte oder ein Missverständnis von uns, da die erste Spalte ein anderes Verhalten vom Rest hat), durch einen anderen Ansatz.

Das Problem passiert, wenn wir versuchen, auf das Element "back" im Element "card" zu klicken, wenn beide um 180 Grad um die Y-Achse gedreht sind (das heißt, wir klicken auf die Rückseite der Rückseite) "Element, das tatsächlich in der Rückseite des Elements" card "angezeigt wird.

Die Lösung versucht, die frühere Situation zu normalisieren:

• Anstatt das Elternteil von rotierenden („Karte“) Element, wir drehen nur die „vorne“ und „hinten“ innere divs nach einem natürlicheren Verhalten .
• Anfangs befinden sich die vorderen und hinteren Elemente an derselben Position, wobei der zIndex der Vorderseite größer ist als der hintere, und der Rücken um 180 ° um die Y-Achse gedreht ist (als ob zwei Papierstücke zusammen, eins nach vorne) Benutzer, und der andere - zurück - in die entgegengesetzte Richtung).
• Wenn der Benutzer auf die Schaltfläche "Umkehren" klickt, fügen wir die Klasse "umgedreht" zum übergeordneten Element ("Karte") hinzu, aber nur die untergeordneten Elemente sind betroffen: Wir drehen "vorne" um 180 Grad um die Y-Achse. mit seiner Rückseite versteckt, und es wird jetzt "mit Blick auf die Rückseite des Bildschirms"; Wir löschen auch die Drehung von "zurück", so dass es jetzt "dem Benutzer zugewandt" ist und seinen zIndex erhöht. Auf diese Weise behalten wir den Flip-Effekt und das "Zurück" -Div ist nun oben, gegenüber dem Benutzer und empfängt Ereignisse.

Hier ist der Code (die Geige kann weiter unten zu finden):

.container { 
-webkit-column-count: 4; 
    -webkit-column-gap: 10px; 
    -moz-column-count: 4; 
    -moz-column-gap:  10px; 
    column-count:   4; 
    column-gap:   10px; 
} 

.card, .front, .back { 
    width: 100px; 
    height: 100px; 
} 

.card { 
    display: inline-block; 
    position: relative; 
} 

.card .front, 
.card .back { 
    position: absolute; 
    left: 0; top: 0; 
    -webkit-transition: -webkit-transform 1s; 
    -moz-transition: -moz-transform 1s; 
    -o-transition: -o-transform 1s; 
    transition: transform 1s; 
    transform-style: preserve-3d; 
    backface-visibility: hidden; 
} 

.card .front { 
    background: #f00; 
} 

.card .back { 
    background: #0f0; 
    transform: rotateY(180deg); 
} 

/** Flipped **/ 
.card.flipped .front { 
    transform: rotateY(180deg); 
} 

.card.flipped .back { 
    z-index: 2; 
    transform: rotateY(0); 
} 

The fiddle in action