Question

我已经尝试了很多东西，并在这里和网站上搜索了很多例子，例如https://css-tricks.com/centering-css-complete-guide/，但我没有运气。

我找到了一个小提琴，一个人创造了一个翻转卡div，所以我觉得很酷让我在我的网站上尝试。资料来源：http://jsfiddle.net/uxable/YHeKX/

以下是我的HTML的样子：

<section id="test" class="section">

        <div class="row" id="top-section">
            <div class="col-lg-12">
                <h1>Our Pics</h1>
                <p>Check it out!</p>
            </div>
        </div>
        <div class="container">
            <div class="row">
                <div class="col-lg-4 col-sm-12">
                    <div class="flip"> 
                        <div class="card"> 
                        <div class="face front">Front</div> 
                        <div class="face back">Back</div> 
                    </div> 
                    </div>
                </div>

                <div class="col-lg-4 col-sm-12">
                    <div class="flip"> 
                        <div class="card"> 
                        <div class="face front">Front</div> 
                        <div class="face back">Back</div> 
                    </div> 
                    </div>
                </div>

                <div class="col-lg-4 col-sm-12">
                    <div class="flip"> 
                        <div class="card"> 
                        <div class="face front">Front</div> 
                        <div class="face back">Back</div> 
                    </div> 
                    </div>
                </div>

            </div>
    </div>
</section>

这是CSS：

.flip {
  -webkit-perspective: 800;
  -ms-perspective: 800;
  -moz-perspective: 800;
  -o-perspective: 800;
   width: 100%;
   height: 300px;
   position: relative;
   margin: 50px auto;

}
.flip .card.flipped {
  transform:rotatex(180deg);
  -ms-transform:rotatex(180deg); /* IE 9 */
  -moz-transform:rotatex(180deg); /* Firefox */
  -webkit-transform:rotatex(180deg); /* Safari and Chrome */
  -o-transform:rotatex(180deg); /* Opera */
}
.flip .card {
  width: 100%;
  height: 100%;
  -webkit-transform-style: preserve-3d;
  -webkit-transition: 0.5s;
  -moz-transform-style: preserve-3d;
  -moz-transition: 0.5s;
  -ms-transform-style: preserve-3d;
  -ms-transition: 0.5s;
  -o-transform-style: preserve-3d;
  -o-transition: 0.5s;
  transform-style: preserve-3d;
  transition: 0.5s;
}
.flip .card .face {
  width: 100%;
  height: 100%;
  position: absolute;
  z-index: 2;
  font-family: Georgia;
  font-size: 3em;
  backface-visibility: hidden;  /* W3C */
  -webkit-backface-visibility: hidden; /* Safari & Chrome */
  -moz-backface-visibility: hidden; /* Firefox */
  -ms-backface-visibility: hidden; /* Internet Explorer */
  -o-backface-visibility: hidden; /* Opera */

}
.flip .card .front {
  position: absolute;
  z-index: 1;
  background: black;
  color: white;
  cursor: pointer;

}
.flip .card .back {
    background: blue;
    background: white;
    color: black;
    cursor: pointer;

  transform:rotatex(-180deg);
  -ms-transform:rotatex(-180deg); /* IE 9 */
  -moz-transform:rotatex(-180deg); /* Firefox */
  -webkit-transform:rotatex(-180deg); /* Safari and Chrome */
  -o-transform:rotatex(-180deg); /* Opera */

}

问题在于，如果我在卡片上放置一段文字，我就无法将其置于中心位置。它保持在顶部。如何在没有太多痛苦的情况下集中精力？

Answer 1

与桌子一样糟糕，它们是垂直居中的简单方法。请参阅更新的表格，以包含在翻转卡内垂直居中的多行文字：

http://jsfiddle.net/6nhczmnx/

＆＃13;

/* card flip */
$(".flip").hover(function(){
  $(this).find(".card").toggleClass("flipped");
  return false;
});

＆＃13;

body {
 background: #ccc;   
}
.flip {
  -webkit-perspective: 800;
  -ms-perspective: 800;
  -moz-perspective: 800;
  -o-perspective: 800;
   width: 400px;
   height: 200px;
   position: relative;
   margin: 50px auto;
}
.flip .card.flipped {
  transform:rotatey(-180deg);
  -ms-transform:rotatey(-180deg); /* IE 9 */
  -moz-transform:rotatey(-180deg); /* Firefox */
  -webkit-transform:rotatey(-180deg); /* Safari and Chrome */
  -o-transform:rotatey(-180deg); /* Opera */
}
.flip .card {
  width: 100%;
  height: 100%;
  -webkit-transform-style: preserve-3d;
  -webkit-transition: 0.5s;
  -moz-transform-style: preserve-3d;
  -moz-transition: 0.5s;
  -ms-transform-style: preserve-3d;
  -ms-transition: 0.5s;
  -o-transform-style: preserve-3d;
  -o-transition: 0.5s;
  transform-style: preserve-3d;
  transition: 0.5s;
}
.flip .card .face {
  width: 100%;
  height: 100%;
  position: absolute;
  z-index: 2;
  font-family: Georgia;
  font-size: 1.4em;
  text-align: center;
  line-height: 1.5em;
  backface-visibility: hidden;  /* W3C */
  -webkit-backface-visibility: hidden; /* Safari & Chrome */
  -moz-backface-visibility: hidden; /* Firefox */
  -ms-backface-visibility: hidden; /* Internet Explorer */
  -o-backface-visibility: hidden; /* Opera */

}
.flip .card .front {
  position: absolute;
  z-index: 1;
  background: black;
  color: white;
  cursor: pointer;
}
.flip .card .back {
    background: blue;
    background: white;
    color: black;
    cursor: pointer;
    
  transform:rotatey(-180deg);
  -ms-transform:rotatey(-180deg); /* IE 9 */
  -moz-transform:rotatey(-180deg); /* Firefox */
  -webkit-transform:rotatey(-180deg); /* Safari and Chrome */
  -o-transform:rotatey(-180deg); /* Opera */

}

/* Additional new CSS added below */
.flip .card .face {
  overflow: auto;
}
.flip .card .face table {
    height: 100%;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="flip"> 
  <div class="card"> 
      <div class="face front">
          <table>
              <tr>
                  <td><h3>Scrollable Text</h3>
                    Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text</td>
              </tr>
          </table>
      </div> 
    <div class="face back">
      <table>
          <tr>
              <td align="left"><p style="text-align:center;">V-centred if contained</p>
               Back text Back text Back text Back text Back text</td>
          </tr>
      </table>
    </div> 
  </div> 
</div>

＆＃13;

如何将此翻转卡示例集中在一起？

1 个答案: