Question

在网页上工作（Codepen [here] [1]），它有一个标题，一个背景图像，然后是一些文本。当您单击图像时，它会翻转几次（在轴上旋转）以显示新图像。我一直在努力将这张图片定位一段时间。我终于将图像放在标题下方和文本上方，旋转工作，图像在旋转时保持原位。

问题是我无法使图像居中。我希望图像和页面本身具有响应性，因此图像始终位于它所在的走廊的中心。这是我的HTML和CSS（jQuery与此无关）：`

<h1>A Tribute to the Doctors of Doctor Who</h1>
  <div id="container">
    <div id="card">
      <div class="front"></div>
      <div class="back"></div>
    </div>
  </div>
<div>
<p>Lorem Ipsum (full paragraph)</p>

#container{
  width: 41vmin;
  height: 60vmin;
  position: relative;
  perspective: 3000px;       
  display: inline-block;
  text-align: center;
}

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

#card.flipped{
  transform: /*translateY(100%)*/ rotateY(900deg);
}

#card div{
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
}

.front{
  background-image: url("https://static3.comicvine.com/uploads/original/4/49017/1112141-tardis.jpg");
  background-size: cover;
}

.back{
  background-image: url("https://s-media-cache-ak0.pinimg.com/originals/c8/3a/ce/c83ace6e2751a862d21d48c59d63a780.jpg");
  background-size: cover;
  transform: rotateY(180deg);
}

h1 {
  text-align: center;
}

div p {
  display: inline-block;
}

我尝试过各种各样的事情 - 弄乱边缘，左边和顶部，取出和改变绝对和亲戚的位置。我发现的一件事是，如果我采取的位置：绝对离开#card div，图像在旋转时将不会保持原位。

这让我疯了！帮助！

  [1]:

http://codepen.io/dtarvin/pen/EmbPqr

Answer 1

只需在div容器外添加另一个div并放宽：100％;和文本对齐：中心;那应该这样做。我添加了div和样式。

＆＃13;

.outside-container{
  width: 100%;
  text-align: center;
}

＆＃13;

<div class="outside-container">
<div id="container">
  <div id="card">
    <div class="front"></div>
    <div class="back"></div>
  </div>
</div>
</div>

＆＃13;

JSFiddle

使用变换3d时居中背景图像并定位相对和绝对

1 个答案: