Question

我在transform: rotate(-2deg);上使用section。当用户将鼠标悬停在section上时，会使用transform: scale(1.1);更改大小。

我的网站上有一个页面，我想保持旋转，但不是当用户将鼠标悬停在该部分上时的比例。有没有办法重置transform: scale(1.1);而无需重置transform: rotate(-2deg);？

以下是完整的代码：

section {
    display: block;
    width: 100px;
    height: 100px;
    padding: 10px;
    background: red;
    /* Rotate */
    -webkit-transform: rotate(-2deg);
    -moz-transform: rotate(-2deg);
    -ms-transform: rotate(-2deg);
    -o-transform: rotate(-2deg);
    transform: rotate(-2deg);
    /* Easing */
    -webkit-transition: -webkit-transform .2s ease-in-out;
    -moz-transition: -moz-transform .2s ease-in-out;
    -o-transition: -o-transform .2s ease-in-out;
    transition: transform .2s ease-in-out;
}
section:hover {
    -webkit-transform: scale(1.1);
    -moz-transform: scale(1.1);
    -ms-transform: scale(1.1);
    -o-transform: scale(1.1);
    transform: scale(1.1);
}
.some-page section:hover {
    -webkit-transform: none;
    -moz-transform: none;
    -ms-transform: none;
    -o-transform: none;
    transform: none;
}

小提琴here。

Answer 1

您可以在transform选择器上重新设置原始hover值，如下所示：

.some-page section:hover {
    -webkit-transform: rotate(-2deg);
    -moz-transform: rotate(-2deg);
    -ms-transform: rotate(-2deg);
    -o-transform: rotate(-2deg);
    transform: rotate(-2deg);
}

这将确保旋转保持在-2度，但不会发生缩放，因为此选择器更具体，并且优先于其他通用hover选择器。

section {
  display: block;
  width: 100px;
  height: 100px;
  padding: 10px;
  background: red;
  /* Rotate */
  -webkit-transform: rotate(-2deg);
  -moz-transform: rotate(-2deg);
  -ms-transform: rotate(-2deg);
  -o-transform: rotate(-2deg);
  transform: rotate(-2deg);
  /* Easing */
  -webkit-transition: -webkit-transform .2s ease-in-out;
  -moz-transition: -moz-transform .2s ease-in-out;
  -o-transition: -o-transform .2s ease-in-out;
  transition: transform .2s ease-in-out;
}
section:hover {
  -webkit-transform: scale(1.1);
  -moz-transform: scale(1.1);
  -ms-transform: scale(1.1);
  -o-transform: scale(1.1);
  transform: scale(1.1);
}
.some-page section:hover {
  -webkit-transform: rotate(-2deg);
  -moz-transform: rotate(-2deg);
  -ms-transform: rotate(-2deg);
  -o-transform: rotate(-2deg);
  transform: rotate(-2deg);
}

/* Just for demo */

section {
  margin: 10px;
}

<section>I'm some content</section>
<div class="some-page">
  <section>I'm some content</section>
</div>

变换：缩放重置

1 个答案: