CSS Transform at chrome - css

Question

I've created simply hover animation using CSS and some Jquery. All works fine until chrome get updated. Now transformed element is half after content and half before, link to demo site: http://demo.pandaart.pl/wp/gemini/ On firefox it works fine. On IE same problem as chrome.
Here is my CSS:
#home_boxes{
position: relative;
margin-left: -10px;
margin-right: -10px;
display: table;
width:1170px;
}
#home_boxes .item {
float: left;
width: 370px; height: 250px;
display: block;
margin: 10px;
}
#home_boxes .box .opis{
position: absolute;
height: 100px;
width:100%;
left:0; bottom: 0;
color: #FFF;
z-index: 1;
text-shadow: 0px 1px 2px rgba(0, 0, 0, 0.7);
text-align: center;
}
#home_boxes .box .opis .bg{
background: #dd2a1b;
opacity: 0.7;
position: absolute;
width:100%;
height: 100%;
left:0;top:0;
display: block;
z-index: -1;
}
#home_boxes .box .content{
display: none;
height: 100%;
padding: 20px;
background: #FFF;
opacity: 0;
}
#home_boxes .box {
float: left;
width: 370px; height: 250px;
display: block;
background-size: cover;
background-repeat: no-repeat;
background-position: center center;
background-color: #FFF;
border: 7px solid #442321;
border-radius: 7px;
position: relative;
overflow: hidden;
transition: all 0.8s cubic-bezier(0.18, 0.89, 0.32, 1);
}
#home_boxes .box.open{
position: absolute;
width: calc(100% - 20px);
height: 520px;
z-index: 1002;
transition: all 0.8s cubic-bezier(0.18, 0.89, 0.32, 1.3);
}
#home_boxes .item:nth-of-type(2) .box.open{
margin-left: -390px;
}
#home_boxes .item:nth-of-type(3) .box.open{
margin-left: -780px;
}
#home_boxes .item:nth-of-type(4) .box.open{
margin-top:-270px;
}
#home_boxes .item:nth-of-type(5) .box.open{
margin-top:-270px;
margin-left: -390px;
}
#home_boxes .item:nth-of-type(6) .box.open{
margin-top:-270px;
margin-left: -780px;
}
#home_boxes .box .okladki{
opacity: 0;
width:100%; height: 100%;
position: absolute;
transform:rotateY(0deg);
transition:transform .3s ease-in-out;
transform-style:preserve-3d;
cursor: pointer;
}
#home_boxes .box.open .content{
display: block;
overflow: auto;
}
#home_boxes .box:not(.open) .okladki{
opacity: 1;
}
#home_boxes .box .okladki > div {
width: 100%; height: 100%;
position: absolute; top: 0; left: 0; right: 0; bottom: 0;
}
#home_boxes .box .front {
transform:translateZ(40px);
}
#home_boxes .box .back {
background: #3B5998; font-size: 3em;
transform:rotateY(-100deg) translateZ(40px);
}
#home_boxes .box .okladki:hover {
transform: rotateY(100deg);
}
Any suggestions? Thanks for comments ;)

Answer 1

updated some of css worked fine for me
#home_boxes .box .okladki:hover {
transform: rotateY(180deg);
}
#home_boxes .box .front {
transform: rotateY(0deg) translateZ(40px);
}
#home_boxes .box .back {
background: #3B5998;
font-size: 3em;
transform: rotateY(-180deg) translateZ(40px);
}
you can refer http://davidwalsh.name/css-flip for more details

Answer 2

Updated the value of translateZ(180px) in the below class, add the below code and try.
#home_boxes .box .back {
background: #3B5998; font-size: 3em;
transform:rotateY(-100deg) translateZ(180px);
}