CSS :hover transform scale命令改为旋转对象

Question

.arrow {
  display: inline-block;
  height: 8px;
  width: 8px;
  margin-top: 20px;
  border-top: solid black 2.5px;
  border-left: solid black 2.5px;
  -ms-transform: rotate(-45deg);
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
  -webkit-transition: transform 1s;
  -moz-transition: transform 1s;
  transition: transform 1s;
  cursor: pointer;
}
.arrow::before {
  content: "";
  display: inline-block;
  width: 18px;
  margin-left: -3px;
  margin-bottom: 7px;
  border-top: solid black 1.8px;
  -ms-transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
}
.arrow:hover {
  -ms-transform: scale(1.2);
  -webkit-transform: scale(1.2);
  -moz-transform: scale(1.2);
  transform: scale(1.2);
}

<span class="arrow"></span>

我使用 css 绘制了一个箭头，并尝试使用 css :hover 和 transform:scale 创建悬停放大效果。然而，代码先旋转箭头，然后再按比例放大。我想知道为什么会发生轮换，我该如何解决？提前致谢！

Answer 1

将此 CSS 用于悬停：

.arrow:hover {
  -ms-transform: scale(1.2) rotate(-45deg);
  -webkit-transform: scale(1.2) rotate(-45deg);
  -moz-transform: scale(1.2) rotate(-45deg);
  transform: scale(1.2) rotate(-45deg);
}

旋转是在整个元素上设置的，在悬停变换期间没有考虑。

here 是一个工作示例

Answer 2

.arrow {
  display: inline-block;
  height: 8px;
  width: 8px;
  margin-top: 20px;
  border-top: solid black 2.5px;
  border-left: solid black 2.5px;
  -ms-transform: rotate(-45deg);
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
  -webkit-transition: transform 1s;
  -moz-transition: transform 1s;
  transition: transform 1s;
  cursor: pointer;
}
.arrow::before {
  content: "";
  display: inline-block;
  width: 18px;
  margin-left: -3px;
  margin-bottom: 7px;
  border-top: solid black 1.8px;
  -ms-transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
}
.arrow:hover {
  -ms-transform: rotate(-45deg) scale(1.2);
  -webkit-transform: rotate(-45deg) scale(1.2);
  -moz-transform: rotate(-45deg) scale(1.2);
  transform: rotate(-45deg) scale(1.2);
}

<span class="arrow"></span>

问题是 转换属性不加总，如果您重写属性并想保持它的原始值，您需要重复它。

Answer 3

您只能对 :before 进行变换，这样悬停时它不会旋转。

.arrow {
  display: inline-block;
  height: 1px;
  width: 18px;
  border-top: solid black 1.8px;
  -webkit-transition: transform 1s;
  -moz-transition: transform 1s;
  transition: transform 1s;
  cursor: pointer;
}
.arrow:before {
  content: "";
  display: inline-block;
  margin-top: -10px;
  height: 8px;
  width: 8px;
  border-top: solid black 2.5px;
  border-left: solid black 2.5px;
  -ms-transform: rotate(-45deg);
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
  -webkit-transition: transform 1s;
  -moz-transition: transform 1s;
  transition: transform 1s;
  cursor: pointer;
position: relative;
top: -9px;
}
.arrow:hover {
  -ms-transform: scale(1.2);
  -webkit-transform: scale(1.2);
  -moz-transform: scale(1.2);
  transform: scale(1.2);
}

<span class="arrow"></span>

CSS :hover transform scale命令改为旋转对象

CSS :hover transform scale command rotate object instead

css

hover

transform

scale