Filter and backface visibility

HTML

<div class="square" onclick="rotateY(this, 60)">
<div class="card front">
FRONT FRONT FRONT!!!!!!
</div>
<div class="card back">
</div>
</div>

<div style="position: absolute; top: 200px">
Click the card.
</div>

CSS

.square {
  position: absolute;
  width: 100px;
  height: 100px;
  transform-style: preserve-3d;
  filter: blur(5px); // !!! COMMENT THIS FILTER LINE AND YOU'LL SEE THE CORRECT BEHAVIOR !!!
}

.card {
  display: block;
  position: absolute;
  width: 100px;
  height: 100px;
  backface-visibility: hidden;
  transform-style: preserve-3d;
}

.front {
  background-color: red;
}

.back {
  background-color: blue;
  transform: rotateY(180deg);
}

JavaScript

var degY = 0;

window.rotateY = function (element, degree) {
	degY = degY + degree;
  element.style.transform = "rotateY(" + degY + "deg)";
  element.style.transition = "transform 600ms cubic-bezier(0.3, 0.6, 0.1, 1)"
}