使用CSS3翻转卡片问题

时间:2017-12-12 14:35:58

标签: html css css3

翻转卡有问题,RotationY会在调整浏览器大小时产生空白区域。

请记住,我必须继续使用父div的百分比,我的意思是在下面的小提琴中显示相同的网格样式。

我已经翻转了所有方框,以便在翻转后看到问题,因此您可以调整窗口大小并查看导致的问题。

enter image description here

  <div id="card" class="flipped">
     <figure class="front">Front</figure>
     <figure class="back">Back</figure>
  </div>

https://jsfiddle.net/z6znny1q/

请查看http://bahaasamir.me/test.mov

2 个答案:

答案 0 :(得分:0)

根据您的上一条评论,我认为问题出在这个课程上:

#card {
  width: 100%;
  height: 100%;
  position: absolute;
  transform-style: preserve-3d;
  transition: transform 1s;
}

width:100%更改为width:100px(或200px某个数字)。 当您根据父容器(和浏览器窗口)使用%containers resize时。

答案 1 :(得分:0)

执行3d变换时,这是一个常见问题。 一种解决方法是使用带有卡片颜色的1px边框(如果可能的话)

例如,使用您提供的代码,这将是一个解决方案

body {
  background: #000;
  padding: 0;
  margin: 0;
}

.os_set {
  width: 100%;
  height: 100%;
  margin: 0 auto;
  position: absolute;
  display: grid;
  grid-template-columns: 20% 20% 20% 20% 20%;
  grid-auto-rows: 50% 50% 50% 50% 50%;
  grid-gap: 0;
  justify-items: stretch;
  align-items: stretch;
}

.os_box {
  line-height: 203px;
  text-align: center;
  position: relative;
  perspective: 800px;
  -webkit-perspective: 800px;
  cursor: default;
  z-index: 99;
}

#card {
  width: 100%;
  height: 100%;
  position: absolute;
  transform-style: preserve-3d;
  transition: transform 1s;
}

#card figure {
  margin: 0;
  display: block;
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;

}

#card .front {
  background: #fff;
}

#card .back {
  background: #ccc;
  transform: rotateY( 180deg);
    border:1px solid #ccc; /* added this */
}

#card.flipped {
  transform: rotateY( 180deg);
}
<div class="os_set">

  <div class="os_box">
    <div id="card" class="flipped">
      <figure class="front">Front</figure>
      <figure class="back">Back</figure>
    </div>
  </div>

  <div class="os_box">
    <div id="card" class="flipped">
      <figure class="front">Front</figure>
      <figure class="back">Back</figure>
    </div>
  </div>

  <div class="os_box">
    <div id="card" class="flipped">
      <figure class="front">Front</figure>
      <figure class="back">Back</figure>
    </div>
  </div>

  <div class="os_box">
    <div id="card" class="flipped">
      <figure class="front">Front</figure>
      <figure class="back">Back</figure>
    </div>
  </div>

  <div class="os_box">
    <div id="card" class="flipped">
      <figure class="front">Front</figure>
      <figure class="back">Back</figure>
    </div>
  </div>

  <div class="os_box">
    <div id="card" class="flipped">
      <figure class="front">Front</figure>
      <figure class="back">Back</figure>
    </div>
  </div>

  <div class="os_box">
    <div id="card" class="flipped">
      <figure class="front">Front</figure>
      <figure class="back">Back</figure>
    </div>
  </div>

  <div class="os_box">
    <div id="card" class="flipped">
      <figure class="front">Front</figure>
      <figure class="back">Back</figure>
    </div>
  </div>

  <div class="os_box">
    <div id="card" class="flipped">
      <figure class="front">Front</figure>
      <figure class="back">Back</figure>
    </div>
  </div>

  <div class="os_box">
    <div id="card" class="flipped">
      <figure class="front">Front</figure>
      <figure class="back">Back</figure>
    </div>
  </div>

</div>