Transform: scale reset - html

Question

I'm using transform: rotate(-2deg); on a section. When the user hovers over the section, it changes in size using transform: scale(1.1);.
There's one page on my site where I'd like to maintain the rotation, but not the scale when the user hovers over the section. Is there a way to reset transform: scale(1.1); without resetting transform: rotate(-2deg);?
Here's the code in full:
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

You could just set the original transform value back again on the hover selector like given below:
.some-page section:hover {
-webkit-transform: rotate(-2deg);
-moz-transform: rotate(-2deg);
-ms-transform: rotate(-2deg);
-o-transform: rotate(-2deg);
transform: rotate(-2deg);
}
This would make sure that the rotation stays at -2 degree but the scale would not happen as this selector is more specific and would take precedence over the other generic hover selector.
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>