Question

我正在创建一个翻转联系卡（link）的转换，但背面可见性属性给我带来了问题。在codepen中可以看到，翻转后没有任何东西消失（即使它已经将其“背面”转向屏幕）。我尝试在卡片内部创建一个子div，继承它的大小并尝试从头开始翻转它，这样当卡片被翻转时，div就会在它的正面并覆盖其余部分。但是，背面可见性对该子div不起作用：

.cardBack{
  padding:20px 50px;
  background-color:white;
  position:absolute;
  width:inherit;
  height:inherit;
  backface-visibility:hidden;
  transform:rotateX(180deg);
  z-index:101;
}

如果我删除转换：rotateX 或背面可见性属性，.cardBack div将覆盖其余内容，当卡被翻转且未折叠时

如果我同时删除它们，它会与我想要的完全相反：.cardBack div在卡片未被翻转时遮盖内容，并在翻转卡片时变得不可见。

如果我这样离开，.cardBack div将永远不可见。

Answer 1

这是更新后的代码 Chrome在旋转元素时有一个奇怪的错误，所以毕竟需要backface-visibility，而不是.card本身。

＆＃13;

$(document).ready(function(){
   $(".card").click(function(){
     $(this).toggleClass("turned");
     $(this).toggleClass("unturned");
   });
});

＆＃13;

body{
  background-color:#5AEDBC;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  overflow:hidden;
}

.card:after{
  box-sizing:border-box;
  backface-visibility:hidden;
  display:block;
  content:'';
  width:200px;
  height:400px;
  left:380px;
  position:absolute;
  background: cadetblue;
  transform:rotateZ(-40deg);
  backface-visibility:hidden;
}

.card{
  padding:20px 50px;
  overflow:hidden;
  position:absolute;
  width:350px;
  height:120px;
  display: flex;
  justify-content: center;
  align-items:center;
  flex-direction: row;
  background-color:white;
  font-family:'Raleway', sans-serif;
  border:5px solid rgba(0,100,100, 0.75);
  color:#008A45;
  margin-top:100px;
  transition:all 1s ease;
  transform-origin:0 100%;
  transform-style: preserve-3d;
}

.cardBack {
  width:100%;
  height:100%;
  position:absolute;
  top: 0;
  left: 0;
  background-color:white;
  z-index:101;
}

.card.unturned .cardBack{
  opacity: 0;
  transition: opacity 0.25s ease 0.25s;
}
.card.turned .cardBack{
  opacity: 1;
  transition: opacity 0s ease 0.15s;
}
/* this is needed for chrome */
.card > * {
  backface-visibility: hidden;
}
/* */
.card.turned{
  transition:all 1s cubic-bezier(.17,.67,.59,1.35);
  transform:rotateX(-180deg);
}

.info{
  display: flex;
  justify-content: center;
  flex-direction: column;
  text-align:right;
  backface-visibility:hidden;
}

.title{
  font-size:26px;
  font-weight:bold italic;
  color:black;
  padding:5px 0;
  display:block;
}

.desc{
  font-size:18px;
  color:#ccc;
  padding:5px 0;
  display:block;
}

.img{
  border-radius: 50%;
  width: 90px;
  height: 90px;
  margin-left:20px;
  backface-visibility:hidden;
  z-index:100;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://fonts.googleapis.com/css?family=Raleway" rel="stylesheet"/>
<div class="card unturned">
  <div class="cardBack"></div>
  <div class="info"><span class="title">Interesting person 1</span><span class="desc">Description of the interesting person 1</span></div><img src="http://www.cavaros.com/site_media/img/icon-profile.png" class="img"/>
</div>
<div class="card unturned">
  <div class="cardBack"></div>
  <div class="info"><span class="title">Interesting person 2</span><span class="desc">Description of the interesting person 2</span></div><img src="http://www.cavaros.com/site_media/img/icon-profile.png" class="img"/>
</div>
<div class="card unturned">
  <div class="cardBack"></div>
  <div class="info"><span class="title">Interesting person 3</span><span class="desc">Description of the interesting person 3</span></div><img src="http://www.cavaros.com/site_media/img/icon-profile.png" class="img"/>
</div>

＆＃13;

查看Codepen.io

CSS变换转换背面 - 可见性不起作用

1 个答案: