Html CSS3转换保持重置旋转

我有一个CSS3转换，但就在转换结束时，我的旋转重置为正常状态。HTML和CSS很简单：

HTML

<a href="#"><span></span>Test</a>

---

过渡按预期进行，除非在动画的最后，旋转重置为正常状态，而不是持续。我创造了一个新的世界。如何保持旋转持续？

尝试添加

显示：内联块

像这样：

a:hover span:before {
    margin-left: 55%; 
    -webkit-transform: rotate(90deg); 
    display: inline-block;
}

解释

默认情况下，伪元素（如

：before

或

：after

是内联的，因此它们在转换时存在问题，因此需要将它们设置为

显示：块

或

显示：内联块

其工作方式使用此方法

• 不要使用

  margin

  作为动画使用

  translate

  istead
• 为了更好的平滑过渡

---

html

<a href="#"><span>></span>Test</a>

---

请正确地澄清这个问题…只有当状态为悬停时，旋转才在这里。我相信你的代码没有问题。如果你想在悬停状态丢失时保持旋转/边距设置，你可能需要使用动画和转发：）@C-linkNepal我是uhh，不知道如何进一步澄清这一点-css旋转会在转换结束时重置，我提供了一个实例以及我的代码…请包括一些解释，因此，其他有此问题的人将受益于此解决方案。@LcSalazar我补充了说明。我仍然没有看到使用内联块的区别。@C-linkNepal，您使用的是什么浏览器？在没有

内联块的Chrome（至少在我的版本上）中，
完成动画，从而旋转，然后传送回初始状态（
），也就是不旋转。使用
内联块
，动画完成后，它保持静止，看起来像西里尔字母l，或者在我的演示中，它保持像
v
，因为我从
-90deg
中删除了
-
。我使用的是最新版本的firefox…在演示中，你有4次
-webkit transform
好的，谢谢更新！
<a href="#"><span>></span>Test</a>

a {
    text-decoration: none;
}
a span {
    display: inline-block;
    width: 25px;
}
a span{
    font-size: 10px;
    font-weight: bold;
    -webkit-transition: all 0.5s linear;
    -moz-transition: all 0.5s linear;
    -ms-transition: all 0.5s linear;
    -o-transition: all 0.5s linear;
    transition: all 0.5s linear;
}
a:hover span{
    -webkit-transform: rotate(-90deg) translateX(50%);
    -moz-transform: rotate(-90deg) translateX(50%);
    -ms-transform: rotate(-90deg) translateX(50%);
    -o-transform: rotate(-90deg) translateX(50%);
    transform: rotate(-90deg) translateX(50%);
}