Question

我正在尝试创建一个翻转卡地铁样式菜单，但是当我将鼠标悬停在前面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;}

我只是想知道是否有一个修复我们可以做到让它看起来像背面是卡的一部分因为现在它似乎是一个静态的面孔并且不会移动而且我是只是翻转前面的一个来显示另一个静态。

查看JSFiddle：http://jsfiddle.net/p6NQ2/2/

Answer 1

方法说明：最初将背面旋转180度，当li悬停时，其子div.back）会旋转回视野（0度））div.front旋转180度，从而使其具有前后翻转效果。

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

.back{
  color: #fff;
  text-align: center;
  line-height: 200px;
  font-size: 22px;
  -webkit-transform: rotateY(180deg); /* initially it would be rotated by 180 deg */
  -moz-transform: rotateY(180deg);
  transform: rotateY(180deg);    
  background: #34495e; /* moved the background color from the li to the back element */
}

li:hover > .front {
  -webkit-transform: rotateY(180deg);
  -moz-transform: rotateY(180deg);
  transform: rotateY(180deg);    
}
li:hover > .back {
  -webkit-transform: rotateY(0deg);
  -moz-transform: rotateY(0deg);    
  transform: rotateY(0deg);
}

在Internet Explorer 10＆amp ;;中测试11，Chrome v24，Firefox v19和Safari v5.1.7（在Windows上）。

注意：

在-webkit-perspective: 1000;而不是li上设置ul（和其他浏览器前缀版本）。在perspective上设置ul时，ul的所有子元素都很常见，并且透视图来自父ul的视点。当它应用于li时，它来自每个人li的视点，因此对每个li产生相同的效果。有关差异的详细信息，请参阅this thread。
我们在容器hover的{{1}}而不是li元素上添加了翻转效果，因为.front元素也在旋转，这会导致一种非常紧张的效果。

将鼠标悬停在LI上

.front

body {
  background: #ecf0f1;
}
ul {
  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;
  -webkit-perspective: 1000;
  -moz-perspective: 1000;
  perspective: 1000;
}
div {
  color: yellow;
  width: 100%;
  height: 100%;
  position: absolute;
  -webkit-transition: all 0.5s ease;
  -moz-transition: all 0.5s ease;
  transition: all 0.5s ease;
  -webkit-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  backface-visibility: hidden;
}
.front {
  z-index: 3;
  color: #fff;
  text-align: center;
  line-height: 210px;
  font-size: 20px;
  background: #e3e3e3;
}
li:hover > .front {
  -webkit-transform: rotateY(180deg);
  -moz-transform: rotateY(180deg);
  transform: rotateY(180deg);
}
li:hover > .back {
  -webkit-transform: rotateY(0deg);
  -moz-transform: rotateY(0deg);
  transform: rotateY(0deg);
}
.back {
  color: #fff;
  text-align: center;
  line-height: 200px;
  font-size: 22px;
  -webkit-transform: rotateY(180deg);
  -moz-transform: rotateY(180deg);
  transform: rotateY(180deg);
  background: #34495e;
}
#box1 {
  background: #1abc9c;
}
#box2 {
  background: #2ecc71;
}
#box3 {
  background: #3498db;
}
#box4 {
  background: #f1c40f;
}
#box5 {
  background: #e67e22;
}
#box6 {
  background: #e74c3c;
}

悬停在前台div上的抖动演示

<link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet"/>
<ul>
  <li>
    <div class="front" id="box1"><i class="fa fa-home fa-2x"> </i> 
    </div>
    <div class="back">Home</div>
  </li>
  <li>
    <div class="front" id="box2"><i class="fa fa-user fa-2x"></i>
    </div>
    <div class="back">About</div>
  </li>
  <li>
    <div class="front" id="box3"><i class="fa fa-briefcase fa-2x"></i>
    </div>
    <div class="back">Portfolio</div>
  </li>
  <li>
    <div class="front" id="box4"><i class="fa fa-desktop fa-2x"></i>
    </div>
    <div class="back">Services</div>
  </li>
  <li>
    <div class="front" id="box5"><i class="fa fa-cubes fa-2x"></i>
    </div>
    <div class="back">Products</div>
  </li>
  <li>
    <div class="front" id="box6"><i class="fa fa-envelope fa-2x"></i>
    </div>
    <div class="back">Contact</div>
  </li>
</ul>

body {
    background: #ecf0f1;
}
ul {
    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;
    -webkit-perspective: 1000;
}
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);
}
.front:hover + .back {
    -webkit-transform: rotateY(0deg);
}
.back {
    color: #fff;
    text-align: center;
    line-height: 200px;
    font-size: 22px;
    -webkit-transform: rotateY(180deg);
    background: #34495e;
}
#box1 {
    background: #1abc9c;
}
#box2 {
    background: #2ecc71;
}
#box3 {
    background: #3498db;
}
#box4 {
    background: #f1c40f;
}
#box5 {
    background: #e67e22;
}
#box6 {
    background: #e74c3c;
}

Answer 2

也许是这样的：

<强> CSS Flip: DEMO

我添加了两个新类：Flipper，Flip Container。

.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's | Paul Lewis的图形CSS FLIP包括jQuery。这真的很酷，你可能会发现它更有帮助：

里面有一个CSS代码，它分为两部分，第一部分是“Card”的“运动”，第二部分是主要的style.css。我建议你把它们分开。

<强> CSS: 3D Flip: JSFIDDLE

祝你好运！

翻卡问题

2 个答案: