3d flip animation не работает в chrome

Question

Я хотел создать карту с текстом, который будет переворачиваться и показывать заднюю часть каким-либо другим текстом, всякий раз, когда вы нажимаете на «карточку» (div). Я проверял все ошибки и прочее, но почему-то не работал на хроме.

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"); 
    }); 
    } 
})(); 

Answer 1

Вот рабочая скрипку http://jsfiddle.net/hzsbzxw6/, кажется, что все это должно работать, это может быть путь вы вставляете скрипт.

<script type = "text/javascript"> 

Попробуйте установить это, или, в конечном счете, не встраивать его в линию.