在以下情况下，旋转元素变得模糊：在应用于兄弟的下划线动画之前

Question

该模式有两个锚点，其中一个锚点旋转并在兄弟姐妹拥有时变得模糊：在强调动画之前。能否请您为当前问题建议什么是可能的解决方案？

＆＃13;

＆＃13;

.sibling {
  position: relative;
  margin: 30px;
}

.sibling:hover:before {
  visibility: hidden;
  transform: scaleX(0);
}

.sibling:before {
  content: "";
  width: 100%;
  height: 1px;
  position: absolute;
  bottom: 0;
  left: 0;
  background-color: #000;
  visibility: visible;
  transform: scaleX(1);
  transition: all 0.4s ease-in-out;
}

.rotated {
  transform: rotate(-90deg);
  margin: 30px;
  position: absolute;
}

＆＃13;

<a class='sibling'>Sibling</a>
<a class='rotated'>Rotated</a>

＆＃13;

＆＃13;

＆＃13;

Answer 1

将translate3d(0,0,0)和-webkit-font-smoothing: antialiased;添加到您的旋转文字中。这应该有用。

＆＃13;

＆＃13;

.sibling {
  position: relative;
  margin: 30px;
}

.sibling:hover:before {
  visibility: hidden;
  transform: scaleX(0);
}

.sibling:before {
  content: "";
  width: 100%;
  height: 1px;
  position: absolute;
  bottom: 0;
  left: 0;
  background-color: #000;
  visibility: visible;
  transform: scaleX(1);
  transition: all 0.4s ease-in-out;
}

.rotated {
  transform: rotate(-90deg) translate3d(0,0,0);
  margin: 30px;
  position: absolute;
  -webkit-font-smoothing: antialiased;
}

＆＃13;

<a class='sibling'>Sibling</a>
<a class='rotated'>Rotated</a>

＆＃13;

＆＃13;

＆＃13;