Трансформация: сброс шкалы

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

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