翻转卡问题 [英] Flipping Card Issue

查看：87
本文介绍了翻转卡问题的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我试图创建一个翻转卡地铁样式菜单，但是当我试图声明前面和后面的样式，当你将鼠标悬停在前面的div，当它显示后div不好看。 p>

以下是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 /

解决方案

方法说明旋转180度，当 li 悬停时，其子 div.back ）旋转回视图0度），而 div.front 旋转180度，因此给它一个正面和背面的翻转效果。



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

 。返回{
 color：#fff; 
 text-align：center; 
 line-height：200px; 
 font-size：22px; 
 -webkit-transform：rotateY（180deg）; / *初始时会旋转180度* / 
 -moz-transform：rotateY（180deg）; 
 transform：rotateY（180deg）; 
 background：＃34495e; / *将背景颜色从li移动到后面的元素* / 
} 
 
 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. 在上设置 -webkit-perspective：1000; li ，而不是 ul 。当在 ul 上设置透视时， ul ，透视图是从父 ul 的视点开始的。当它应用于 li 时，是从每个个人 li 的角度出发，因此产生相同的效果每个 li 。请参阅 此主题 。

  2. 我们在容器的 hover 上添加了翻转效果<$ c $因为 .front 元素也是 li 而不是 .front




    3. 演示hover on 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;位置：相对; cursor：pointer; font-family：'Open Sans'; font-weight：300; -webkit-perspective：1000; -moz-perspective：1000;透视：1000;} div {color：yellow;宽度：100％;高度：100％; position：absolute; -webkit-transition：all 0.5s ease; -moz-transition：all 0.5s ease;过渡：全0.5s缓解; -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）;背景：＃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 =stylesheet/>< ul> < li> < div class =frontid =box1>< i class =fa fa-home fa-2x> < / i> < / div> < div class =back>首页< / div> < / li> < li> < div class =frontid =box2>< i class =fa fa-user fa-2x>< / i> < / div> < div class =back>关于< / div> < / li> < li> < div class =frontid =box3>< i class =fa fa-briefcase fa-2x>< / i> < / div> < div class =back> Portfolio< / div> < / li> < li> < div class =frontid =box4>< i class =fa fa-desktop fa-2x>< / i> < / div> < div class =back>服务< / div> < / li> < li> < div class =frontid =box5>< i class =fa fa-cubes fa-2x>< / i> < / div> < div class =back>产品< / div> < / li> < li> < div class =frontid =box6>< i class =fa fa-envelope fa-2x>< / i> < / div> < div class =back>联系人< / div> < / li>< / ul>



    Jittery demo with hover on front 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;位置：相对; cursor：pointer; font-family：'Open Sans'; font-weight：300; -webkit-perspective：1000;} div {color：yellow;宽度：100％;高度：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）;}。 text-align：center; line-height：200px; font-size：22px; -webkit-transform：rotateY（180deg）;背景：＃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 =stylesheet/>< ul> < li> < div class =frontid =box1>< i class =fa fa-home fa-2x> < / i> < / div> < div class =back>首页< / div> < / li> < li> < div class =frontid =box2>< i class =fa fa-user fa-2x>< / i> < / div> < div class =back>关于< / div> < / li> < li> < div class =frontid =box3>< i class =fa fa-briefcase fa-2x>< / i> < / div> < div class =back> Portfolio< / div> < / li> < li> < div class =frontid =box4>< i class =fa fa-desktop fa-2x>< / i> < / div> < div class =back>服务< / div> < / li> < li> < div class =frontid =box5>< i class =fa fa-cubes fa-2x>< / i> < / div> < div class =back>产品< / div> < / li> < li> < div class =frontid =box6>< i class =fa fa-envelope fa-2x>< / i> < / div> < div class =back>联系人< / div> < / li>< / ul>


    I am trying to create a flipping card metro style menu, however when I tried to declare the front and back styles when you are hovering your mouse on the front div it does not look good when it shows the back div.

    Here's the CSS code: 

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

    I am just wondering if there is a fix that we can do to make it look like the back is a part of the card cause right now it seems that it was a static face and won't move and I am just flipping front one to show the other static.

    Check out the JSFiddle: http://jsfiddle.net/p6NQ2/2/

    解决方案

    Method explanation: Initially the back face is rotated by 180 deg and when the li is hovered on, its child div.back) is rotated back into view (0 deg) while the div.front is rotated by 180 deg and thus gives it a front and back flipping effect.

    You can achieve the card flip effect by doing the following changes to your 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);
}

    Tested in Internet Explorer 10 & 11, Chrome v24, Firefox v19 and Safari v5.1.7 (on Windows).

    Notes:

    1. Set the -webkit-perspective: 1000; (and other browser prefixed versions) on the li rather than on the ul. When the perspective is set on the ul, it is common for all child elements of the ul and the perspective is from the view point of the parent ul. When it is applied on the li it is from the view point of each individual li and hence produces the same effect on each li. Refer to this thread for more details on the difference.
    2. We are adding the flip effect on the hover of the container li instead of the .front element because since the .front element is also being rotated, it would cause a very jittery effect.

    Demo with hover on 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>

    Jittery demo with hover on front 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>

    这篇关于翻转卡问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆