第一次旋转后，3d flip + slick.js会自动翻转

Question

我在CSS3中使用旋转木马+ 3d翻转时遇到了一些错误。当我点击旋转木马并翻转按钮时，第一张幻灯片会在整个旋转后自动翻转/翻转。

这里是screencast of what I mean.

和the fiddle

var init = function() {
  var flippers = document.getElementsByClassName("flip");

    for(i = 0; i < flippers.length; i++){
        flippers[i].addEventListener( 'click', function(){
            var cardID = this.getAttribute('data-targetid');;
            var card = document.getElementById(cardID);
            card.toggleClassName('flipped');
  }, false);
    }
};

Answer 1

从z-index: 2删除.front为我修复了

顺便问一下这个问题。截屏，jsfiddle，代码示例......很漂亮！

将其添加到小提琴中的CSS：

.slick-cloned {
    background-color: red;
}

然后你会在它之前看到＆＃34;闪烁＆＃34;从前到后，实际上克隆的幻灯片可见，然后被删除。

Answer 2

我在Safari中遇到了这个问题。另外，对于我正在研究相同问题的问题，这是非常有帮助的。 https://css-tricks.com/almanac/properties/b/backface-visibility/

<强>背面能见度： Firefox 10+和IE 10+支持背面可见性，没有前缀。 Opera（Blink，15岁以上），Chrome，Safari，iOS和Android都需要-webkit-backface-visibility。