悬停时平滑 CSS 变换高度：自动答案

【问题标题】：Smooth CSS transform on hover with height:auto悬停时平滑 CSS 变换高度：自动
【发布时间】：2018-05-30 16:53:19
【问题描述】：

我想使用 CSS 转换在悬停时翻转卡片。

我发现以下方法可行：

body {
  background: #f2f2f2;
  font-family: Arial, sans-serif;
  color: #000;
  padding: 20px;
}

h3 {
  font-size: 16px;
}

/* entire container, keeps perspective */

.flip-container {
  perspective: 1000;
  transform-style: preserve-3d;
  width: 50%;
  padding-top: 20px;
  background: green;
}

.flip-container,
.front,
.back {
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}


/* hide back of pane during swap */

.front,
.back {
  transition: 0.6s;
  transform-style: preserve-3d;
  position: absolute;
  top: 0;
  left: 0;
  background: #ffffff;
  box-shadow: 0 2px 0 rgba(0, 0, 0, 0.1);
  text-align: center;
}

.back {
  background: #343434;
  color: #fff;
}


/* flip speed goes here */

.flipper {
  transition: 0.4s;
  transform-style: preserve-3d;
  max-height: 999px;
  position: relative;
}


/*  front pane, placed above back */

.front {
  z-index: 2;
  transform: rotateY(0deg);
}


/* back, initially hidden pane */

.back {
  transform: rotateY(-180deg);
}


/* flip the pane when hovered */

.flip-container:hover .back {
  transform: rotateY(0deg);
}

.flip-container:hover .front {
  transform: rotateY(180deg);
}

<div class="flip-container" ontouchstart="this.classList.toggle('hover');">
  <div class="flipper">
    <div class="front">
      <!-- front content -->

      <h3>Until 4 Oct 2015</h3>
      <h2>Tyrannosaurus - Meet the Family</h2>
    </div>
  </div>
  <div class="back">
    <!-- back content -->

    <h3>In short</h3>
    <p>Tyrannosaurus - Meet the Family explores how these terrifying dinosaurs became the world's top predators with their massive skulls, powerful jaws, and bone-crunching teeth.</p>
    <a class="button" href="#">Find out more</a>
  </div>
  
</div>

但是，当鼠标悬停在卡片上时，动画会卡住 - 我认为原因是 .card-container 父元素不适应子 div 的完整高度。

卡片的高度设置为 :auto 也很重要，因为在同一页面上会有不同高度的卡片，具体取决于内部文本的长度。

感谢您的帮助。

https://codepen.io/anon/pen/ZvbjEQ

【问题讨论】：

看起来不错，白色在绿色后面，黑色在正确

标签： html css css-animations

【解决方案1】：

问题在于您与front 和back 一起使用的绝对位置，这使得父元素的高度为0。相反，您可以简单地将一个元素设置为绝对位置并保持另一个相对位置。

你可以像这样简化代码：

body {
  background: #f2f2f2;
  font-family: Arial, sans-serif;
  color: #000;
  padding: 20px;
}

h3 {
  font-size: 16px;
}

/* entire container, keeps perspective */

.flip-container {
  perspective: 1000;
  transform-style: preserve-3d;
  width: 50%;
  padding-top: 20px;
  
}

.flip-container,
.front,
.back {
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}


/* hide back of pane during swap */

.front,
.back {
  transition: 0.6s;
  transform-style: preserve-3d;
  position: absolute;
  top: 0;
  left: 0;
  background: #ffffff;
  box-shadow: 0 2px 0 rgba(0, 0, 0, 0.1);
  text-align: center;
}

.back {
  background: #343434;
  color: #fff;
}


/* flip speed goes here */

/*  front pane, placed above back */

.front {
  z-index: 2;
  transform: rotateY(0deg);
  position: relative;
}


/* back, initially hidden pane */

.back {
  transform: rotateY(-180deg);
}


/* flip the pane when hovered */

.flip-container:hover .back {
  transform: rotateY(0deg);
}

.flip-container:hover .front {
  transform: rotateY(180deg);
}

<div class="flip-container" ontouchstart="this.classList.toggle('hover');">
    <div class="front">
      <!-- front content -->

      <h3>Until 4 Oct 2015</h3>
      <h2>Tyrannosaurus - Meet the Family</h2>
    </div>
  <div class="back">
    <!-- back content -->

    <h3>In short</h3>
    <p>Tyrannosaurus - Meet the Family explores how these terrifying dinosaurs became the world's top predators with their massive skulls, powerful jaws, and bone-crunching teeth.</p>
    <a class="button" href="#">Find out more</a>
  </div>
  
</div>

【讨论】：