Blurred text using transform-style in CSS - html

Question

I have problem with CSS below. In div with class front text is blurred like on this image
I'm using Chrome, but on every browser I see same blurred text. I want keep every div but I'm not sure what makes this text so blurred.
How I can fix it to make it no blure?
JsFiddle
HTML and CSS
.main {
margin: auto;
height: auto;
padding-top: 25px;
}
.panel {
width: 45%;
display: inline-block;
margin: 14px;
}
.est {
box-shadow: 0 0 0 #fff;
background-color: transparent;
}
.flip .back {
-webkit-transform: rotateY(360deg);
-moz-transform: rotateY(360deg);
-ms-transform: rotateY(360deg);
-o-transform: rotateY(360deg);
transform: rotateY(360deg);
}
#card-1,
#card-2,
#card-3,
#card-4,
#card-5 {
height: 300px;
width: 100%;
margin: 0 auto;
z-index: 1;
display: inline-block;
perspective: 700px;
}
h4,
.h4 {
font-size: 20px;
}
body {
font-size: 14px;
font-family: Roboto, sans-serif;
line-height: 1.35;
color: #222;
background: #f4f5f7;
text-rendering: optimizeLegibility;
padding: 0;
left: 0;
right: 0;
transition-duration: 200ms;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}
.front {
-webkit-transform: rotateY(0);
-moz-transform: rotateY(0);
-ms-transform: rotateY(0);
-o-transform: rotateY(0);
transform: rotateY(0);
z-index: 1;
}
.back,
.front {
border: 1px solid #ddd;
height: 100%;
top: 0;
transform-style: preserve-3d;
backface-visibility: hidden;
}
.back,
.front,
.front .info-box,
.social-bar {
position: absolute;
left: 0;
width: 100%;
}
.ease {
-webkit-transition: all .45s ease-out;
-moz-transition: all .45s ease-out;
-ms-transition: all .45s ease-out;
-o-transition: all .45s ease-out;
transition: all .45s ease-out;
}
.e-i-f-about,
.front,
.p-class-earn,
.strike {
overflow: hidden;
}
.back,
.flip .front {
-webkit-transform: rotateY(180deg);
-moz-transform: rotateY(180deg);
-ms-transform: rotateY(180deg);
-o-transform: rotateY(180deg);
transform: rotateY(180deg);
}
.back,
.front {
border: 1px solid #ddd;
height: 100%;
top: 0;
transform-style: preserve-3d;
backface-visibility: hidden;
}
.back,
.front,
.front .info-box,
.social-bar {
position: absolute;
left: 0;
width: 100%;
}
.back {
background-color: #fff;
display: table;
z-index: 2;
font-size: 13px;
line-height: 23px;
padding: 10px 20px;
height: 320px;
}
<div class="main pad-2">
<center>
<h4>Not blurred text</h4>
<div class="panel e-b est" style="margin-top:0">
<div class="wrapper">
<div id="card-1">
<div class="front ease">
Click
<div class="info-box">
<div class="info">
<h4>test1 blurred text</h4>
</div>
</div>
</div>
<div class="back ease">
2nd text here
</div>
</div>
</div>
</div>
<div class="panel e-b est" style="margin-top:0">
<div class="wrapper">
<div id="card-2">
<div class="front ease">
Click
<div class="info-box">
<div class="info">
<h4>test2 blurred text</h4>
</div>
</div>
</div>
<div class="back ease">
2nd text here
</div>
</div>
</div>
</div>
</center>
</div>