不确定如何实现此转换/动画

Question

所以我能够创建一个'翻转卡'元素;但是，我的问题是我正在尝试使用transform：scale（）缩放整个元素，以便在旋转的大约一半时，我希望元素开始扩展到更大的尺寸/比例。

只是不确定我是否使用动画，多个动画或仅过渡...或过渡+动画...只是有点混淆什么是最有效的方法。

我尝试了动画+过渡，如下所示，它非常小故障并且行为不可预测。

html, body {
  background: #f2edea;
  height: 100%;
  width: 100%;
}

img {
  width: 100%;
  max-height: 100%;
}

.flipcard {
  width: 150px;
  height: 200px;
  margin: auto;
  top: 20%;
  position: relative;
  box-shadow: 5px 5px 20px #c4c4c4;
  border: 3px solid #b8b8ba;
  border-radius: 5px;
  background: pink;
  transform-style: preserve-3d;
  transition: transform 2s;
} 

@keyframes grow {
  from {
    transform: scale(0);
  }
  to {
    transform: scale(2);
  }
}

.flipcard:hover {
  transform: rotateY(180deg);
  animation: grow 1s; 
}

.front-side  {
  height: 100%;
  width: 100%;
  position: relative;
  backface-visibility: hidden;
  
}

.back-side {
  width: 100%;
  height: 100%;
  transform: rotateY(180deg);
  position: absolute;
  top: 0;
  border-radius: 3px;
}

<div class='flipcard'>
  <div class='front-side'>
    <img src='https://pre00.deviantart.net/4121/th/pre/i/2018/059/6/7/brigitte_by_raikoart-dc4kzas.png'>
  </div>
  <div class='back-side'>
    <img src="https://img00.deviantart.net/e0ec/i/2017/297/8/c/mercy_by_raikoart-dbrm54b.png">
  </div>
</div>

Answer 1

这里的主要问题是你在不同的地方使用变换：在悬停状态和动画中。所以一个人会压倒另一个创造你的问题。旋转和缩放应该在同一个转换属性中组合，你应该从scale(1)而不是scale(0)开始。然后你应该将forwards添加到动画中，这样你就可以在动画结束时保持最后的状态。

---

在悬停时的初始代码中，将忽略旋转，因为动画的变换将覆盖悬停状态下的变换。然后你将你的元素缩放到0，这意味着你的元素将有0高度和宽度，你将失去悬停，你的元素将突然再次出现（因为没有更多的悬停，所以没有更多的动画），依此类推。这是你的闪烁。

你可能会告诉我为什么它有时会起作用？只是因为如果你有运气（如果光标接近中间），动画将在你丢失悬停之前继续，然后它将结束。当动画结束时，现在不再考虑缩放和旋转变换。

---

在Y轴上旋转元素时要考虑的另一个重要事项：如果旋转是90deg，那么在此状态下元素的宽度将等于0，您也可能再次丢失悬停。避免这种情况的想法是将悬停添加到容器并旋转子项，以便您确保永远不会丢失悬停，因为容器不会移动。

html,
body {
  background: #f2edea;
  height: 100%;
  width: 100%;
}

img {
  width: 100%;
  max-height: 100%;
}
.container {
  width: 150px;
  height: 200px;
  margin:50px auto;
}
.flipcard {
  width: 150px;
  height: 200px;
  position: relative;
  box-shadow: 5px 5px 20px #c4c4c4;
  border: 3px solid #b8b8ba;
  border-radius: 5px;
  background: pink;
  transform-style: preserve-3d;
  transition: transform 2s;
}

@keyframes grow {
  from {
    transform: scale(1);
  }
  50% {
    transform: scale(1) rotateY(180deg);
  }
  100% {
    transform: scale(2) rotateY(180deg);
  }
}

.container:hover .flipcard {
  animation: grow 1s forwards;
}

.front-side {
  height: 100%;
  width: 100%;
  position: relative;
  backface-visibility: hidden;
}

.back-side {
  width: 100%;
  height: 100%;
  transform: rotateY(180deg);
  position: absolute;
  top: 0;
  border-radius: 3px;
}

<div class="container">
  <div class='flipcard'>
    <div class='front-side'>
      <img src='https://pre00.deviantart.net/4121/th/pre/i/2018/059/6/7/brigitte_by_raikoart-dc4kzas.png'>
    </div>
    <div class='back-side'>
      <img src="https://img00.deviantart.net/e0ec/i/2017/297/8/c/mercy_by_raikoart-dbrm54b.png">
    </div>
  </div>
</div>

Answer 2

在单个动画中同时使用scale和rotate变换。

html, body {
  background: #f2edea;
  height: 100%;
  width: 100%;
}

img {
  width: 100%;
  max-height: 100%;
}

.flipcard {
  width: 150px;
  height: 200px;
  margin: auto;
  top: 20%;
  position: relative;
  box-shadow: 5px 5px 20px #c4c4c4;
  border: 3px solid #b8b8ba;
  border-radius: 5px;
  background: pink;
  transform-style: preserve-3d;
  transition: transform 2s;
} 

@keyframes growandflip {
  from {
    transform: scale(1);
  }
  50% {
    transform: rotateY(180deg) scale(1);
  }
  100% {
    transform: rotateY(180deg) scale(2);
  }
}

.flipcard:hover {
  animation: growandflip 2s; 
}

.front-side  {
  height: 100%;
  width: 100%;
  position: relative;
  backface-visibility: hidden;
  
}

.back-side {
  width: 100%;
  height: 100%;
  transform: rotateY(180deg);
  position: absolute;
  top: 0;
  border-radius: 3px;
}

<div class='flipcard'>
  <div class='front-side'>
    <img src='https://pre00.deviantart.net/4121/th/pre/i/2018/059/6/7/brigitte_by_raikoart-dc4kzas.png'>
  </div>
  <div class='back-side'>
    <img src="https://img00.deviantart.net/e0ec/i/2017/297/8/c/mercy_by_raikoart-dbrm54b.png">
  </div>
</div>

Answer 3

@keyframes grow {
  0% {
    transform: scale(0);
  }
  50% {
    transform: scale(0);
  }
  100% {
    transform: scale(2);
  }
}