Question

我一直在尝试使用网络上的一些教程创建css翻转动画。大多数教程仅讨论元素高度已知的情况。例如，在本教程中 http://davidwalsh.name/css-flip 翻盖容器，正面和背面的高度设置为480px。

.flip-container, .front, .back {
   width: 320px;
    height: 480px;
}

如果我在翻转容器后添加任何div，它应该遵循正常的文档流程并在翻转容器后浮动。但是，如果我不知道前后元素的大小，或者说我希望它根据内容动态扩展，那么我就会遇到问题。因为制作.front和。返回“绝对”使他们脱离文档流。

http://jsfiddle.net/zk81h12u/4/

<div class="flip-container ">
   ....
</div
<div class="icon-container">
  icon
</div>

关于如何在翻转容器之后正确浮动“icon-container”的任何想法。现在它只是在翻盖容器的顶部“。

Answer 1

从您展示的示例中，.front和.back始终具有相同的高度，对吧？即使它是动态的。因此，您只能在后面元素中使用position: absolute;。

.back {
  position: absolute;
  top: 0;
}

您可以删除这些属性，在这种情况下，“后退”部分会覆盖内容，但仍会正常运行。

我创建了一个更详细的版本，并对代码进行了全面改进，看看：

.flip-container,
.flip-container .front,
.flip-container .back {
  backface-visibility: hidden;
  height: 100%;
  min-width: 320px;
  position: relative;
}

.flip-container {
  overflow: hidden;
  perspective: 1000;
  position: relative;
}

.flip-container:hover .flipper,
.flip-container.active .flipper {
  transform: rotateY(180deg);
}

.flip-container .flipper {
  transition: 0.6s;
  transform-style: preserve-3d;
}

.flip-container .front,
.flip-container .back {
  background-color: white;
  border: 1em solid #61AE24;
  border-radius: 6px;
  box-sizing: border-box;
  min-height: 150px;
}

.flip-container .front {
  transform: rotateY(0deg);
  z-index: 2;
}

.flip-container .back {
  top: 0;
  transform: rotateY(180deg);
  position: absolute;
}

<div class="flip-container">
  <div class="flipper">
    <div class="front">
      Hello! I'm on the front part.
    </div>

    <div class="back">
      CSS animations are a lot of fun; the beauty of them is that through many simple properties, you can create anything from an elegant fade in to a WTF-Pixar-would-be-proud effect. One CSS effect somewhere in between is the CSS flip effect, whereby there's content on both the front and back of a given container. This tutorial will show you show to create that effect in as simple a manner as possible.
    </div>
  </div>
</div>

<div>
  Content flow.
</div>

否则，您可以考虑使用JavaScript。

var flipContainer, flipContainerBack, flipContainerFront;

flipContainer = document.querySelector('.flip-container');
flipContainerFront = document.querySelector('.flip-container .front');
flipContainerBack = document.querySelector('.flip-container .back');

function setFlipContainerFrontHeight() {
  flipContainer.style.height = flipContainerFront.offsetHeight + 'px';
};

function setFlipContainerBackHeight() {
  flipContainer.style.height = flipContainerBack.offsetHeight + 'px';
};

setFlipContainerFrontHeight();
flipContainer.onmouseover = setFlipContainerBackHeight;
flipContainer.onmouseout = setFlipContainerFrontHeight;

.flip-container,
.flip-container .front,
.flip-container .back {
  backface-visibility: hidden;
  min-width: 320px;
  position: relative;
}

.flip-container {
  perspective: 1000;

  -ms-transition: height 0.6s;
  -moz-transition: height 0.6s;
  -o-transition: height 0.6s;
  -webkit-transition: height 0.6s;
  transition: height 0.6s;
}

.flip-container:hover .flipper,
.flip-container.active .flipper {
  transform: rotateY(180deg);
}

.flip-container .flipper {
  transition: 0.6s;
  transform-style: preserve-3d;
}

.flip-container .front,
.flip-container .back {
  background-color: white;
  border: 1em solid #61AE24;
  border-radius: 6px;
  box-sizing: border-box;
}

.flip-container .front {
  transform: rotateY(0deg);
  z-index: 2;
}

.flip-container .back {
  top: 0;
  transform: rotateY(180deg);
  position: absolute;
}

<div class="flip-container">
  <div class="flipper">
    <div class="front">
      Hello! I'm on the front part.
    </div>

    <div class="back">
      CSS animations are a lot of fun; the beauty of them is that through many simple properties, you can create anything from an elegant fade in to a WTF-Pixar-would-be-proud effect. One CSS effect somewhere in between is the CSS flip effect, whereby there's content on both the front and back of a given container. This tutorial will show you show to create that effect in as simple a manner as possible.
    </div>
  </div>
</div>

<div>
  Content flow.
</div>

由于绝对元素，div在css翻转动画之后div没有正确浮动

1 个答案: