Question

我使用CSS和一些Jquery创建了简单的悬停动画。一切正常，直到chrome更新。现在转换后的元素是内容的一半和之前的一半，链接到演示站点：http://demo.pandaart.pl/wp/gemini/在Firefox上它工作正常。在IE上与Chrome相同的问题。

这是我的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);
}

Chrome转换为CSS

2 个答案: