CSS Transform at chrome

Question

Я создал анимацию простого наведения с использованием CSS и некоторых JQuery. Все работает нормально, пока хром не обновится. Теперь преобразованный элемент находится наполовину после контента и наполовину раньше, ссылка на демонстрационный сайт: http://demo.pandaart.pl/wp/gemini/ На firefox он отлично работает. На IE такая же проблема, как хром.

Вот мой 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); 
} 

Любые предложения? Спасибо за комментарии;)

Answer 1

обновил некоторые CSS работало отлично для меня

#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); 
} 

вы можете обратиться http://davidwalsh.name/css-flip для получения более подробной информации

Answer 2

Обновленных значения translateZ(180px) ниже в классе, добавьте приведенный ниже код и пытаться.

#home_boxes .box .back { 
    background: #3B5998; font-size: 3em; 
    transform:rotateY(-100deg) translateZ(180px); 
}