CSS 3d вращение не работает с расположением столбцов на Chrome

Question

Мне нужно управлять преобразованием некоторых divs, щелкнув узел html. Когда эти divs имеют дисплей «встроенный блок», он работает нормально, но если я оберну их в макет столбца с помощью css3, они не будут работать (за исключением первого столбца!)

Проверьте эту скрипту: https://jsfiddle.net/madelavega/hjyntsob/

В первой части, с расположением столбцов, работает только первый столбец: нажмите на флип, а затем нажмите «Я работаю», обратите внимание на стиль наведения CSS; во втором и третьем столбцах это не работает.

Во второй части, с встроенным блоком дисплея, он работает нормально.

Мне нужен макет столбца, но он кажется ошибкой Chrome, потому что он хорошо работает в Firefox. Кто-нибудь знает об этом?

$('.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

Для тех, кто заинтересован, мы решили эту проблему (которая сама по себе может быть ошибка в Chrome или недопонимание нами, так как первый столбец имеет различное поведение от остальных), используя другой подход.

Проблема возникает, когда мы пытаемся щелкнуть элемент «назад» внутри элемента «карта», когда оба повернуты на 180 градусов вокруг оси Y (это означает, что мы пытаемся щелкнуть по обратной стороне «назад» ", который фактически отображается на обратной стороне элемента" card ").

Решение пытается нормализовать предыдущую ситуацию:

• Вместо вращения родителя («карты») элемента, мы только повернуть «фронт» и «назад» внутренние див, после более естественного поведения ,
• Изначально передние и задние элементы находятся в одном и том же положении, при этом передняя часть zIndex больше, чем задняя, ​​а задняя часть повернута на 180 ° вокруг оси Y (например, с двумя листами бумаги, одна - спереди - пользователя, а другой - назад - в противоположном направлении).
• Когда пользователь нажимает кнопку «Отразить», мы продолжаем добавлять «перевернутый» класс к родительскому («карточному») элементу, но затрагиваются только дети: мы вращаем «фронт» на 180 градусов вокруг оси Y, с закрытой обратной стороной, и теперь она будет «обращена к задней части экрана»; мы также очищаем вращение «назад», поэтому теперь оно будет «обращено к пользователю» и увеличит его значение zIndex. Таким образом, мы сохраняем эффект flip, а «back» div теперь сверху, обращаясь к пользователю и принимающим событиям.

Вот код (скрипка можно найти ниже):

.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