Html 翻牌发行

我正在尝试创建一个翻页卡metro样式菜单，但是当我试图声明前面和后面的样式时，当您将鼠标悬停在前面的div上时，它在显示后面的div时看起来并不好

以下是CSS代码：

ul{ 
    -webkit-perspective: 1000; 
    width: 50%; 
    margin: 120px auto;
}
li{ 
    width: 200px; 
    height: 200px; 
    margin-right: 10px; 
    margin-bottom: 10px;  
    float: left; 
    list-style: none;  
    position: relative;
    cursor: pointer; 
    font-family: 'Open Sans'; 
    font-weight: 300;  
    background: #34495e;
}
div{ 
    color: yellow; 
    width: 100%; 
    height: 100%; 
    position: absolute; 
    -webkit-transition: all 0.5s ease; 
    -webkit-backface-visibility: hidden;
}
.front{
    z-index: 3;
    color: #fff;
    text-align: center;
    line-height: 210px;
    font-size: 20px;
    background: #e3e3e3;
}
.front:hover {
    z-index: 0;
    -webkit-transform: rotateY(180deg);
}
.back:hover {
    -webkit-transform: rotateY(0deg);
}
.back{
    color: #fff;
    text-align: center;
    line-height: 200px;
    font-size: 22px;
}
#box1{ background: #1abc9c;}
#box2{ background: #2ecc71;}
#box3{ background: #3498db;}
#box4{ background: #f1c40f;}
#box5{ background: #e67e22;}
#box6{ background: #e74c3c;}

我只是想知道是否有一个修复，我们可以做，使它看起来像背面是卡的一部分，因为现在它似乎是一个静态的脸，不会移动，我只是翻转前面一个显示其他静态

---

查看JSFIDLE:

可能是这样的：

我添加了两个新类：Flipper和Flip容器

.flip-container {
    perspective: 1000;
}
    /* flip when hovered */
    .flip-container:hover .flipper, .flip-container.hover .flipper {
        transform: rotateY(180deg);
    }
.flipper {
    transition: 0.6s;
    transform-style: preserve-3d;
    position: relative;
}
.front, .back {
    backface-visibility: hidden;
    position: absolute;
    top: 0;
    left: 0;
}

其他信息：

我嵌入了Aerotwist的| Paul Lewis的图形CSS翻转，包括jQuery。 它真的很酷，您可能会发现它更有用：

里面有一个CSS代码，它分为两部分，第一部分是卡片的移动，第二部分是主样式。CSS。我建议你把它们分开

祝你好运

方法说明：最初，背面旋转180度，当li悬停时，其子div.back旋转回视图0度，而div.front旋转180度，从而产生前后翻转效果

您可以通过对CSS进行以下更改来实现卡片翻转效果

.回来{ 颜色：fff； 文本对齐：居中； 线高：200px； 字体大小：22px； -webkit变换：旋转180度；/*最初它将旋转180度*/ -莫兹变换：旋转180度； 变换：旋转180度； 背景：34495e；/*将背景色从li移到了back元素*/ } 李：悬停>.front{ -webkit变换：旋转180度； -莫兹变换：旋转180度； 变换：旋转180度； } 李：悬停>。后退{ -webkit变换：旋转0度； -moz变换：旋转0度； 变换：旋转0度； } 在Windows上的Internet Explorer 10和11、Chrome v24、Firefox v19和Safari v5.1.7中测试

注:

设置-webkit透视图：1000；和其他浏览器的前缀版本在li上，而不是ul上。当在ul上设置透视图时，该透视图对于ul的所有子元素都是通用的，并且透视图是从父ul的角度进行的。当它应用于li时，它是从每个li的角度出发的，因此对每个li产生相同的效果。有关差异的更多详细信息，请参阅。 我们在容器li的悬停处添加翻转效果，而不是.front元素，因为.front元素也在旋转，这将导致非常抖动的效果。 鼠标悬停在LI上的演示

身体{ 背景：ecf0f1； } 保险商实验室{ 宽度：50%； 保证金：120px自动； } 李{ 宽度：200px； 高度：200px； 右边距：10px； 边缘底部：10px； 浮动：左； 列表样式：无； 位置：相对位置； 光标：指针； 字体系列：“开放式SAN”； 字体大小：300； -webkit透视图：1000； -莫兹透视图：1000； 前景：1 000； } div{ 颜色：黄色； 宽度：100%； 身高：100%； 位置：绝对位置； -webkit过渡：所有0.5s轻松； -moz过渡：所有0.5s轻松； 过渡：所有0.5s缓解； -webkit背面可见性：隐藏； -moz背面可见性：隐藏； 背面可见性：隐藏； } .前线{ z指数：3； 颜色：fff； 文本对齐：居中； 线高：210px； 字体大小：20px； 背景：E3； } 李：悬停>.front{ -webkit变换：旋转180度； -莫兹变换：旋转180度； 变换：旋转180度； } 李：悬停>。后退{ -webkit变换：旋转0度； -moz变换：旋转0度； 变换：旋转0度； } .回来{ 颜色：fff； 文本对齐：居中； 线高：200px； 字体大小：22px； -webkit变换：旋转180度； -莫兹变换：旋转180度； 变换：旋转180度； 背景：34495e； } 框1{ 背景：1abc9c； } 框2{ 背景：2ecc71； } 框3{ 背景：3498db； } 方框4{ 背景：f1c40f； } 方框5{ 背景：e67e22； } 方框6{ 背景：e74c3c； } 家 关于 文件夹 服务 产品 联系

---

你在找什么？漂亮的动画！