Html 变换：比例重置

我正在使用

transform:rotate（-2deg）在
部分
上。当用户将鼠标悬停在
部分
上时，它会使用
变换：比例（1.1）改变大小

在我的站点上有一个页面，我希望在其中保持旋转，但当用户将鼠标悬停在该部分上时，不会保持缩放。是否有方法重置
变换：比例（1.1）无需重置
变换：旋转（-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;
}

拨弄。
您只需在
悬停
选择器上重新设置原始的
转换
值，如下所示：

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

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


部分{
显示：块；
宽度：100px；
高度：100px；
填充：10px；
背景：红色；
/*轮换*/
-webkit变换：旋转（-2deg）；
-moz变换：旋转（-2deg）；
-ms变换：旋转（-2deg）；
-o变换：旋转（-2deg）；
变换：旋转（-2deg）；
/*缓和*/
-webkit转换：-webkit转换。2轻松输入输出；
-moz转换：-moz转换。2秒轻松输入输出；
-o-转换：-o-转换。2容易输入输出；
转换：转换。2s轻松输入输出；
}
部分：悬停{
-webkit转换：比例（1.1）；
-moz变换：比例（1.1）；
-ms变换：比例（1.1）；
-o变换：比例（1.1）；
转换：比例（1.1）；
}
.某些页面部分：悬停{
-webkit变换：旋转（-2deg）；
-moz变换：旋转（-2deg）；
-ms变换：旋转（-2deg）；
-o变换：旋转（-2deg）；
变换：旋转（-2deg）；
}
/*只是为了演示*/
部分{
利润率：10px；
}
我有些满足感
我有些满足
我为什么没想到？！谢谢老兄：）@squideeyes:很乐意帮忙：）有时候我们看代码看得太久了，错过了最明显的。这是一双额外的眼睛可以帮助的地方。