容器没有响应位置相对

时间：2015-09-06 16:08:31

标签： html css css3 animation

我有一个页面，其中有几张卡片可以悬停翻转，大部分工作正常，我遇到的问题是，当页面缩小并且卡片堆叠时，底部的卡片不是＆＃ 39;向下移动页面。

我将容器设置为Position Relative，但背面是Position Absolute。

＆＃13;
＆＃13; 
.flip-container {
  -webkit-perspective: 1000;
  -moz-perspective: 1000;
  -o-perspective: 1000;
  perspective: 1000;
}
.flip-container:hover .flipper,
.flip-container.hover .flipper {
  -webkit-transform: rotateY(180deg);
  -moz-transform: rotateY(180deg);
  -ms-transform: rotateY(180deg);
  -o-transform: rotateY(180deg);
  transform: rotateY(180deg);
}
.flip-container,
.front,
.back {
  width: 100%;
  min-height: 400px;
}
.flipper {
  -webkit-transition: 0.5s ease-in-out;
  -webkit-transform-style: preserve-3d;
  -moz-transition: 0.5s ease-in-out;
  -moz-transform-style: preserve-3d;
  -ms-transition: 0.5s ease-in-out;
  -ms-transform-style: preserve-3d;
  -o-transition: 0.5s ease-in-out;
  -o-transform-style: preserve-3d;
  transition: 0.5s ease-in-out;
  transform-style: preserve-3d;
  position: relative;
}
.front,
.back {
  -webkit-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  -o-backface-visibility: hidden;
  backface-visibility: hidden;
  position: absolute;
  top: 0;
  left: 0;
}
@import 'card-img';
 .front {
  z-index: 2;
  span {
    display: none;
  }
}
.back {
  -webkit-transform: rotateY(180deg);
  -moz-transform: rotateY(180deg);
  -ms-transform: rotateY(180deg);
  -o-transform: rotateY(180deg);
  transform: rotateY(180deg);
  margin-top: 11px;
  padding: 10px;
  border: 3px solid #434343;
  color: $off-white;
  h4 {
    margin: 0;
  }
  .game-title {
    margin-bottom: 10px;
    font-weight: 700;
  }
  .date {
    font-weight: 700;
  }
  .game-info {
    display: table;
    min-height: 245px;
    p {
      display: table-cell;
      vertical-align: middle;
      text-align: justify;
      font-size: 1.1em;
    }
  }
}
.btn-preorder {
  position: relative;
  margin-left: 5%;
  margin-top: 10px;
  width: 90%;
}
＆＃13; 
<div class="col-xs-12 col-sm-4 col-md-2 col-lg-2">

  <div class="flip-wrap">
    <div class="flip-container">
      <div class="flipper">
        <div class="front front-1"><span>Game Title Here</span>
        </div>
        <div class="back">
          <h4 class="game-title">Star Wars: Battlefront</h4>
          <div class="date">
            Release Date:
            <p>November 20<sup>th</sup> 2015</p>
          </div>
          <div class="game-info">
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Provident ducimus omnis modi ipsum ex commodi eum! Cupiditate, id, pariatur. Repellendus, id, incidunt. Labore ea, blanditiis, officia pariatur exercitationem earum autem. Lorem ipsum
              dolor sit amet, consectetur adipisicing elit. Recusandae animi, laboriosam cum rem fugit, quis, et sed, laudantium ipsa reprehenderit aut unde ad tempora expedita libero dolor est repellat. Unde. Lorem ipsum dolor sit amet, consectetur adipisicing
              elit. Dolorem enim quam autem sunt ipsam tempora rem eum illo soluta odio in blanditiis quis repellat sequi, nihil ad laborum, totam consequuntur.</p>
          </div>
          <div class="btn btn-primary btn-preorder">Pre-order</div>
        </div>
      </div>
    </div>
  </div>

</div>
<!-- End col -->
＆＃13;
＆＃13;
＆＃13;

1 个答案:

答案 0 :(得分：0)

这是因为.back超过width: 100%;。您可以通过添加box-sizing: border-box;

来覆盖

喜欢这个 

.front, .back {
     -webkit-backface-visibility: hidden;
     -moz-backface-visibility: hidden;
     -o-backface-visibility: hidden;
     backface-visibility: hidden;
     position: absolute;
     top: 0;
     left: 0;
     box-sizing: border-box;
}

以下是工作演示

＆＃13;
＆＃13; 
body {
    overflow: hidden;
}
.flip-container {
     -webkit-perspective: 1000;
     -moz-perspective: 1000;
     -o-perspective: 1000;
     perspective: 1000;
}
 .flip-container:hover .flipper, .flip-container.hover .flipper {
     -webkit-transform: rotateY(180deg);
     -moz-transform: rotateY(180deg);
     -ms-transform: rotateY(180deg);
     -o-transform: rotateY(180deg);
     transform: rotateY(180deg);
}
 .flip-container, .front, .back {
     width: 100%;
     min-height: 400px;
}
 .flipper {
     -webkit-transition: 0.5s ease-in-out;
     -webkit-transform-style: preserve-3d;
     -moz-transition: 0.5s ease-in-out;
     -moz-transform-style: preserve-3d;
     -ms-transition: 0.5s ease-in-out;
     -ms-transform-style: preserve-3d;
     -o-transition: 0.5s ease-in-out;
     -o-transform-style: preserve-3d;
     transition: 0.5s ease-in-out;
     transform-style: preserve-3d;
     position: relative;
}
 .front, .back {
     -webkit-backface-visibility: hidden;
     -moz-backface-visibility: hidden;
     -o-backface-visibility: hidden;
     backface-visibility: hidden;
     position: absolute;
     top: 0;
     left: 0;
     box-sizing: border-box;
}
 .front {
     z-index: 2;
}
 span {
     display: none;
}
 .back {
     -webkit-transform: rotateY(180deg);
     -moz-transform: rotateY(180deg);
     -ms-transform: rotateY(180deg);
     -o-transform: rotateY(180deg);
     transform: rotateY(180deg);
     margin-top: 11px;
     padding: 10px;
     border: 3px solid #434343;
     color: $off-white;
}
 h4 {
     margin: 0;
}
 .game-title {
     margin-bottom: 10px;
     font-weight: 700;
}
 .date {
     font-weight: 700;
}
 .game-info {
     display: table;
     min-height: 245px;
}
 p {
     display: table-cell;
     vertical-align: middle;
     text-align: justify;
     font-size: 1.1em;
}
 .btn-preorder {
     position: relative;
     margin-left: 5%;
     margin-top: 10px;
     width: 90%;
}
 body {
     margin: 0;
}
＆＃13; 
<div class="col-xs-12 col-sm-4 col-md-2 col-lg-2">
    <div class="flip-wrap">
        <div class="flip-container">
            <div class="flipper">
                <div class="front front-1"><span>Game Title Here</span> </div>
                <div class="back">
                    <h4 class="game-title">Star Wars: Battlefront</h4>
                    <div class="date"> Release Date:
                        <p>November 20<sup>th</sup> 2015</p>
                    </div>
                    <div class="game-info">
                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Provident ducimus omnis modi ipsum ex commodi eum! Cupiditate, id, pariatur. Repellendus, id, incidunt. Labore ea, blanditiis, officia pariatur exercitationem earum autem. Lorem ipsum
                            dolor sit amet, consectetur adipisicing elit. Recusandae animi, laboriosam cum rem fugit, quis, et sed, laudantium ipsa reprehenderit aut unde ad tempora expedita libero dolor est repellat. Unde. Lorem ipsum dolor sit amet, consectetur adipisicing
                            elit. Dolorem enim quam autem sunt ipsam tempora rem eum illo soluta odio in blanditiis quis repellat sequi, nihil ad laborum, totam consequuntur.</p>
                    </div>
                    <div class="btn btn-primary btn-preorder">Pre-order</div>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- End col -->
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题