See my codepen: <http://codepen.io/Chiz/pen/XmEvdm>

Click on the red box. It rotates and now the blue box appears.
Click the blue box. It doesn't switch back to the red box.

I'm pretty sure the JQuery code for the toggleClass part is correct, so why isn't it working?

Tks!

```js
var vCard = $("#card");

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

```css
@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));
}
```

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