html - 翻转卡问题

Question

我正在尝试创建一个翻转卡片 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;}

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

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

Answer 1

方法说明:最初将背面旋转 180 度，当 li 悬停在其上时，其子 div.back)旋转回 View (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 和 11、Chrome v24、Firefox v19 和 Safari v5.1.7(在 Windows 上)中测试。

注意事项:

1. 在 li 而不是 ul 上设置 -webkit-perspective: 1000;(和其他浏览器前缀版本)。当在ul上设置了perspective时，对于ul的所有子元素是通用的，透视是从父级 ul。当它应用于 li 时，它是从每个单独的 li 的 Angular 来看的，因此对每个 li 产生相同的效果。引用this thread有关差异的更多详细信息。
2. 我们在 li 容器的 hover 上添加翻转效果，而不是 .front 元素，因为 . front 元素也在旋转，这会导致非常抖动的效果。

---

悬停在 LI 上的演示

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

<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>

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

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

<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>