Question

我希望div转换为:hover样式，然后返回，悬停和悬停。我知道我可以使用动画，但我不知道如何实现它。

我希望它能像这样进行转换（在悬停时以及在转移时）：

来自：transform: perspective(320px) rotateX(0deg)。
收件人：transform: perspective(320px) rotateX(30deg)。
然后回到：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;
  }
#lorem:hover {
  transform: perspective(320px) rotateX(30deg);
  }

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

Answer 1

我最终使用了两个动画。关键是要让动画具有不同的值，因为即使使用不同的动画名称，动画也不会被触发。因此，您可以通过两个动画更改1deg中的rotateX(0deg)以触发更改

＆＃13;

@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;
  }

＆＃13;

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

＆＃13;

Answer 2

你非常接近自己到达那里！请记住，无论何时想要从一种状态转换到另一种状态，都需要定义初始状态。因此，在原始#lorem状态中，添加初始transform属性，它应该可以正常工作。唯一添加的行是transform: perspective(320px) rotateX(0deg);。请参阅以下代码段：

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

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

Answer 3

您可以选择ghost_dad给出的答案。如果您希望div更改为其悬停状态，那么您可以尝试使用这样的动画：

＆＃13;

#lorem {
    width: 250px;
    height: 18px;
    background: #ff0000;
    color: #fff;
    text-align: center;
    margin: auto;
    padding: 12px;
    animation-name : example;
    animation-duration: .75s;
    animation-iteration-count: 2;
    animation-direction: alternate;
    transition: transform .75s ease-in-out;
    animation-timing-function: ease-in-out;
}

#lorem:hover {
    transform: perspective(320px) rotateX(30deg);
}

/* Chrome, Safari, Opera */
@-webkit-keyframes example {
    from {transform: perspective(320px) rotateX(0deg);}
    to {transform: perspective(320px) rotateX(30deg);}
}

/* Standard syntax */
@keyframes example {
    from {transform: perspective(320px) rotateX(0deg);}
    to {transform: perspective(320px) rotateX(30deg);}
}

＆＃13;

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

＆＃13;

如果您希望它保持旋转状态，那么您可以执行以下操作：

＆＃13;

#lorem {
    width: 250px;
    height: 18px;
    background: #ff0000;
    color: #fff;
    text-align: center;
    margin: auto;
    padding: 12px;
    animation-name : example;
    animation-duration: .75s;
    animation-iteration-count: 1;
    animation-direction: alternate;
    transform: perspective(320px) rotateX(30deg);
    transition: transform .75s ease-in-out;
    animation-timing-function: ease-in-out;
}

#lorem:hover {
    transform: perspective(320px) rotateX(0deg);
}

/* Chrome, Safari, Opera */
@-webkit-keyframes example {
    from {transform: perspective(320px) rotateX(0deg);}
    to {transform: perspective(320px) rotateX(30deg);}
}

/* Standard syntax */
@keyframes example {
    from {transform: perspective(320px) rotateX(0deg);}
    to {transform: perspective(320px) rotateX(30deg);}
}

＆＃13;

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

＆＃13;

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

3 个答案: