css - 如何将元素转换为样式然后再悬停？

Question

我希望 div 过渡到它的 :hover 样式，然后在悬停时和悬停时返回。我知道我可以使用动画，但我不知道如何在这种情况下实现它。

我希望它像这样转换(在悬停和取消悬停时):

• 来自:转换:perspective(320px) rotateX(0deg)。
• 要:转换:perspective(320px) rotateX(30deg)。
• 然后回到:变换:perspective(320px) rotateX(0deg)。

#lorem {
  width: 250px;
  height: 18px;
  background: #ff0000;
  color: #fff;
  text-align: center;
  margin: auto;
  padding: 12px;
  transition: transform .75s ease-in-out;
  }
#lorem:hover {
  transform: perspective(320px) rotateX(30deg);
  }

<div id="lorem">LOREM</div>

Answer 1

我最终使用了两个动​​画。关键是让动画具有不同的值，因为如果它们完全相同，即使使用不同的动画名称也不会被触发。所以你可以通过两个动画改变rotateX(0deg)中的1deg来触发改变

@keyframes fold {
    0%   {transform: perspective(320px) rotateX(0deg);}
    50%  {transform: perspective(320px) rotateX(30deg);}
    100% {transform: perspective(320px) rotateX(0deg);}
}

@keyframes unfold {
    0%   {transform: perspective(320px) rotateX(0deg);}
    50%  {transform: perspective(320px) rotateX(15deg);}
    100% {transform: perspective(320px) rotateX(0deg);}
}
#lorem {
  width: 250px;
  height: 18px;
  background: #ff0000;
  color: #fff;
  text-align: center;
  margin: auto;
  padding: 12px;
  transition: transform .75s ease-in-out;
  animation: fold .75s ease-in-out 0s 1 normal;
  }
#lorem:hover {
  animation: unfold .75s ease-in-out 0s 1 normal;
  }

<div id="lorem">LOREM</div>