翻转卡问题答案

【问题标题】：Flipping Card Issue翻转卡问题
【发布时间】：2016-04-15 13:58:04
【问题描述】：

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

【问题讨论】：

你在寻找类似this的东西吗？

标签： html css

【解决方案1】：

方法说明：最初背面旋转180度，当li悬停在其上时，其子div.back）旋转回到视图（0度），而@ 987654324@ 旋转了 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 上）测试。

注意事项：

在li 而不是ul 上设置-webkit-perspective: 1000;（和其他浏览器前缀版本）。当perspective 设置在ul 上时，对于ul 的所有子元素都是通用的，并且视角是从父ul 的角度来看的。当它应用于li 时，它是从每个li 的角度来看的，因此对每个li 产生相同的效果。有关差异的更多详细信息，请参阅this thread。
我们在容器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>

【讨论】：

美丽的动画！

【解决方案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 的 | Paul Lewis 的 图形 CSS FLIP，包括 jQuery。这真的很酷，您可能会发现它更有帮助：

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

CSS: 3D Flip: JSFIDDLE

祝你好运！

【讨论】：