jquery - 第一次后，toggleClass() 不起作用

Question

查看我的代码笔:http://codepen.io/Chiz/pen/XmEvdm

点击红色框。它旋转，现在出现蓝色框。 单击蓝色框。它不会切换回红色框。

我很确定toggleClass部分的JQuery代码是正确的，那么为什么它不起作用呢？

谢谢!

var vCard = $("#card");

vCard.on("click", function()
{
  $(this).toggleClass("flipped");
});

@mixin prefix($prop, $val)
{
  -webkit-#{$prop}: #{$val};
  -moz-#{$prop}: #{$val};
  -ms-#{$prop}: #{$val};
  #{$prop}: #{$val};
}

.container
{
  width:200px;
  height:260px;
  position:relative;
  perspective:800px;
}

#card
{
  width:100%;
  height:100%;
  position:absolute;
  @include prefix(transform-style,preserve-3d);
  @include prefix(transition, transform 1s);
  @include prefix(backface-visibility, hidden);
  @include prefix(transform-style, preserve-3d);
}

 #card.flipped
{
  @include prefix(transform, rotateY(180deg));
}

#card figure
{
  display: block;
  height: 100%;
  width: 100%;
  line-height: 260px;
  color: white;
  text-align: center;
  font-weight: bold;
  font-size: 140px;
  position: absolute;
  @include prefix(backface-visibility, hidden);
}

.front
{
  background-color:lighten(red,30%);
}
.back
{
  background-color:lighten(blue,30%);
  @include prefix(transform, rotateY(180deg));
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div></div>

Answer 1

试试这个:- http://codepen.io/anon/pen/RWybrd

从#card中删除@include prefix(backface-visibility,hidden);