Javascript 3d翻转动画在chrome中不起作用

我想创建一张带有文本的卡片，每当你点击“卡片”（div）时，它会翻转并显示一个带有其他文本的背面。我检查了所有的错误和东西，但不知怎么的，它在chrome上不起作用

HTML:

Javascript:

（函数（）{
var cards=document.queryselectoral（“.card.effect\uu click”）；
对于（变量i=0，len=cards.length；i

这是一把可以工作的小提琴。看起来这一切都应该可以工作，这可能是您嵌入脚本的方式

<script type = "text/javascript">

尝试修复它，或者最终不将其嵌入到内部

.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);
}

<script type = "text/javascript">