3d翻轉動畫不能在鍍鉻中工作

我想創建一個帶有文本的卡片，只要點擊「卡片」（div），它就會翻轉並顯示背面的其他文字。我檢查了任何錯誤和東西，但不知何故它不在鉻上工作。3d翻轉動畫不能在鍍鉻中工作

HTML：

<div class="card effect__EFFECT"> 
    <div class="card__front"> 
    <span class="card__text">front</span> 
    </div> 
    <div class="card__back"> 
    <span class="card__text">back</span> 
    </div> 
</div>

CSS：

.card { 
    position: relative; 
    float: left; 
    padding-bottom: 25%; 
    width: 25%; 
    text-align: center; 
} 

.card__front, 
.card__back { 
    position: absolute; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%; 
} 

.card__front, 
.card__back { 
    -webkit-backface-visibility: hidden; 
      backface-visibility: hidden; 
    -webkit-transition: -webkit-transform 0.3s; 
      transition: transform 0.3s; 
} 

.card__front { 
    background-color: #ff5078; 
} 

.card__back { 
    background-color: #1e1e1e; 
    -webkit-transform: rotateY(-180deg); 
      transform: rotateY(-180deg); 
} 

.card.effect__click.flipped .card__front { 
    -webkit-transform: rotateY(-180deg); 
      transform: rotateY(-180deg); 
} 

.card.effect__click.flipped .card__back { 
    -webkit-transform: rotateY(0); 
      transform: rotateY(0); 
}

的Javascript：

(function() { 
    var cards = document.querySelectorAll(".card.effect__click"); 
    for (var i = 0, len = cards.length; i < len; i++) { 
    var card = cards[i]; 
    clickListener(card); 
    } 

    function clickListener(card) { 
    card.addEventListener("click", function() { 
     var c = this.classList; 
     c.contains("flipped") === true ? c.remove("flipped") : c.add("flipped"); 
    }); 
    } 
})();

來源

2015-04-27 Arsalan Anwari

這裏是工作提琴http://jsfiddle.net/hzsbzxw6/似乎這應該所有的工作，也可能是方法你在嵌入腳本。

<script type = "text/javascript">

試着修復這個問題，或者最終不要嵌入它內聯。

來源

2015-04-27 20:31:10 pj100

3d翻轉動畫不能在鍍鉻中工作

回答

相關問題