html - 变换 : scale reset

Question

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

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

完整代码如下:

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

fiddle here .

Answer 1

您可以在 hover 选择器上再次设置原始 transform 值，如下所示:

.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>